web-dev-qa-db-ja.com

vm。$ setとVue.setの違いは何ですか？

Vue docs "Reactivity in Depth" およびAPIの vm。$ set および-を注意深く読み、再度読みました。 Vue.set しかし、どちらを使用するかを判断するのはまだ困難です。現在の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、value）メソッドを使用できます。

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 })
javascriptlaravelvue.js
25
user3089840

Vue.setの導入に伴うリリースノートは次のとおりです。

Vueは$ setおよび$ deleteメソッドでObject.prototypeを拡張しなくなりました。これにより、特定の条件チェックでこれらのプロパティに依存するライブラリで問題が発生していました（Meteorのminimongoなど）。 object。$ set（key、value）およびobject。$ delete（key）の代わりに、新しいグローバルメソッドVue.set（object、key、value）およびVue.delete（object、key）を使用します。

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

26
David K. Hess

.$set()を使用してオブジェクトに複数の属性を追加すると、1回だけうまく機能することがわかりました。多分Vue最初にこれらの追加された属性をシーケンスに収集し、次にこれらのシーケンスをゲッターに適用しますおよびセッター;例.

Vue.set(this.b,'first','first');
this.b.second = 'second';
this.b.third = 'third';
this.b.fourth = 'fourth';

'second','third','fourth'は、'first'

0
user11473448