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 のフォーマットが異なることです。次の図は公式ドキュメントからの抜粋です。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。