Vue.set() と this.$set() の使い方と違い

開発に Vue を使用する場合、次のような状況に遭遇することがあります。Vue インスタンスを生成した後、データを再度割り当てると、ビューに自動的に更新されないことがあります。Vue ドキュメントを確認すると、次のような文が見つかります。「インスタンスの作成後にインスタンスに新しいプロパティを追加しても、ビューの更新はトリガーされません。」次のコードは学生オブジェクトに年齢属性を追加します。

データ （） {
  戻る {
    学生：
      名前： ''、
      性別: ''
    }
  }
}
マウント済み () { //——インスタンスがマウントされた後のフック関数 this.student.age = 24
}

ES5 の制限により、Vue.js はオブジェクトプロパティの追加または削除を検出できません。 Vue.js はインスタンスを初期化するときにプロパティをゲッター/セッターに変換するため、Vue.js がプロパティを変換してレスポンシブにするには、プロパティがデータオブジェクト上に存在している必要があります。

正しい書き方: this.$set(this.data,"key",value')

マウントされた（）{
  this.$set(this.student,"年齢", 24)
}

:: Vue では、ルートレベルのレスポンシブプロパティを動的に追加することはできません。

例えば：

constアプリ = 新しいVue({
  データ： {
    1: 1
  }
  // レンダリング: h => h(Suduko)
}).$mount('#app1')

Vue.set(app.data, 'b', 2)

ネストされたオブジェクトにレスポンシブプロパティを追加するには、Vue.set(object, propertyName, value) メソッドのみを使用できます。たとえば、

var vm = 新しい Vue({
    el:'#テスト',
    データ：{
        //情報ルート属性はデータ内に既に存在します:{
            名前:'シャオミン';
        }
    }
});
//情報に性別属性を追加します Vue.set(vm.info,'sex','男');

Vue.set() と this.$set() の実装原則

まず、Vue.set() のソースコードを見てみましょう。

'../observer/index' から {set} をインポートします

...
Vue.set = 設定
...

this.$set() のソースコードを見てみましょう:

'../observer/index' から {set} をインポートします

...
Vue.prototype.$set = 設定
...

その結果、Vue.set() と this.$set() という 2 つの API の実装原理は基本的に同じであり、どちらも set 関数を使用していることがわかりました。 set 関数は、../observer/index ファイルからエクスポートされます。違いは、Vue.set() は set 関数を Vue コンストラクターにバインドするのに対し、this.$set() は set 関数を Vue プロトタイプにバインドすることです。

関数セット (ターゲット: 配列<any> | オブジェクト、キー: any、値: any): any {
  (process.env.NODE_ENV !== 'production' && の場合
    (isUndef(ターゲット) || isPrimitive(ターゲット))
  ）{
    警告(`未定義、null、またはプリミティブ値にリアクティブ プロパティを設定できません: ${(target: any)}`)
  }
  Array.isArray(ターゲット) && isValidArrayIndex(キー) の場合 {
    ターゲットの長さ = Math.max(ターゲットの長さ、キー)
    ターゲット.splice(キー、1、値)
    戻り値
  }
  if (ターゲットのキー && !(Object.prototype のキー)) {
    ターゲット[キー] = 値
    戻り値
  }
  const ob = (ターゲット: 任意).__ob__
  target._isVue の場合、ob と ob.vmCount は次のように記述します。
    process.env.NODE_ENV !== 'production' && 警告(
      'Vue インスタンスまたはそのルート $data にリアクティブ プロパティを追加しないでください ' +
      「実行時 - データ オプションで事前に宣言します。」
    ）
    戻り値
  }
  もし (!ob) {
    ターゲット[キー] = 値
    戻り値
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  戻り値
}

set 関数は、target、key、val の 3 つのパラメーターを受け取り、target の値は配列またはオブジェクトであり、公式 Web サイトで指定されている Vue.set() メソッドを呼び出すときに渡されるパラメーターと正確に一致することがわかりました。

参照:

Vue で遭遇する落とし穴 --- 変更検出の問題 (配列関連)

これで、Vue.set() と this.$set() の使い方と違いについての記事は終了です。Vue.set() と this.$set() に関するその他の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: