Vue での this.$set の使用に関する詳細な説明

Vue での this.$set の使用

背景: フロントエンドプロジェクトを書いていたとき、バックエンドから json オブジェクトが提供され、それをページ上にレンダリングしました。しかし、私自身のニーズにより、返されたオブジェクトにフィールドを追加したいので、フィールドをプッシュします。フィールドは追加されますが、ページのレンダリングは変わりません。後で、応答がないことに気が付きました。この新しいフィールドをレスポンシブにしたい場合は、this.$set を使用してデータを挿入する必要があります。

Vue のデータでオブジェクトまたは配列 (配列内の値はオブジェクト) が宣言または割り当てられている場合、オブジェクトに新しいプロパティを追加してこのプロパティの値を更新しても、ビューは更新されません。

使用

this.$set( target, key, value）

target : 操作対象となる配列またはオブジェクトであるデータソースを表します。

key : 操作対象となるフィールド

value : 変更するデータ

ここに小さな例を示します。

オブジェクトにageプロパティを追加し、応答的に変更する

ここに画像の説明を挿入

<テンプレート>
  <div class="text">
      <p>{{リスト}}</p>
      <button @click="add">年齢++</button>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
    データ（）{
        戻る {
            リスト:{ 名前: "張三"}
        }
    },
    メソッド: {
        追加（）{
            if(!this.list.age){ // age属性がない場合は、age属性を追加します this.list.age=18
            }それ以外{
                this.list.age++
            }
            console.log(このリスト)
        }
    }
}
</スクリプト>

this.$set使用してオブジェクトプロパティを追加しない場合、効果は次のようになります。

データは確かに追加されていますが、ページは age プロパティをレスポンシブにレンダリングしません。

ここに画像の説明を挿入

this.$set(this.list,'age',18)使用して属性を追加します。効果：

ここに画像の説明を挿入

追加されたデータが応答性があることがわかります。

なぜレスポンシブなのか?

よく見ると、this.$set に get age メソッドと set age メソッドが追加されていることがわかります。これがレスポンシブである理由です。

ここに画像の説明を挿入

分析する

Vue のレスポンシブ原則は、JavaScript オブジェクトがデータオプションとして Vue インスタンスに渡されることです。Vue はこのオブジェクトのすべてのプロパティを走査し、Object.defineProperty を使用してこれらすべてのプロパティをゲッター/セッターに変換します。これらのゲッター/セッターはユーザーには見えませんが、内部的には Vue が依存関係を追跡し、プロパティがアクセスされて変更されたときに変更を通知できるようにします。ここで注意すべき点は、コンソールにデータオブジェクトを出力するときに、ブラウザーによって getter/setter のフォーマットが異なることです。次の図は公式ドキュメントからの抜粋です。

ここに画像の説明を挿入