1. ホーム
  2. javascript

[解決済み] vm.setとVue.setの違いは何ですか?

2022-03-01 04:33:48

質問

Vueのドキュメントを注意深く読み直しました。 "リアクションの深層"。 のAPIと vm.$set Vue.セット が、いつどちらを使えばいいのか、まだ判断に迷っています。 私の現在のLaravelプロジェクトでは、オブジェクトに多くのプロパティを動的に設定するため、この2つを区別できるようにすることが重要なのです。

ドキュメントでは、vm.setは"For Vue instance"、Vue.setは"For plain data objects"、Vue.setはグローバルという言葉で分けられているようです。

しかし、プロパティを追加して、それを反応させる方法があります。 インスタンスが作成されました。

Vueインスタンスの場合、$set(path, value)インスタンスメソッドを使用することができます。

vm.$set('b', 2)
// `vm.b` and `data.b` are now reactive

プレーンなデータオブジェクトの場合、グローバルなVue.set(object, key.) を使用することができます。 値) メソッドを使用します。

Vue.set(data, 'c', 3)
// `vm.c` and `data.c` are now reactive

最後に、上記の3番目のオプション(一度に複数のプロパティを追加するためのもの)は、上記の2つのオプションのいずれかと同等の代用品として使用できるでしょうか(複数の代わりに1つのプロパティだけを追加することで)。

に対して、複数のプロパティを割り当てたい場合があります。 例えば Object.assign() や _.extend() を使って、既存のオブジェクトを拡張します。 しかし、オブジェクトに追加された新しいプロパティは、変更をトリガーしません。 このような場合は、新しいオブジェクトを作成し、そのオブジェクトのプロパティを追加します。 元のオブジェクトとミキシンオブジェクト

// instead of `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

解決方法は?

Vue.setの導入に伴うリリースノートはこちらです。

<ブロッククオート

Vue は Object.prototype を拡張し、$set と $delete メソッドを持たなくなりました。 これは、これらのメソッドに依存しているライブラリで問題を引き起こしています。 プロパティを使用することがあります (例: Meteor の minimongo)。 object.$set(key, value)やobject.$delete(key)の代わりに、object.delete(key)を使用します。 新しいグローバルメソッド Vue.set(object, key, value) と Vue.delete(object, キー) を使用します。

だから .$set で利用可能でした。 すべて オブジェクトに適用されます - 現在はビューモデル自身でのみ利用可能です。 Vue.set は、リアクティブオブジェクトへの参照はあるが、それが属しているビューモデルへの参照がない場合に使用されます。