Javascript vm.$set 和 Vue.set 有什么区别？

What is the difference between vm.$set and Vue.set?

提问by user3089840

I have carefully read and re-read the Vue docs "Reactivity in Depth"and the API for vm.$setand Vue.setbut I am still having a difficult time determining when to use which. It is important for me to be able to distinguish between the two because in my current Laravel project, we are setting a lot of properties on objects dynamically.

我已经仔细阅读并重新阅读了 Vue 文档“Reactivity in Depth”以及vm.$set和Vue.set的 API，但我仍然很难确定何时使用哪个。能够区分这两者对我来说很重要，因为在我当前的 Laravel 项目中，我们正在动态地为对象设置很多属性。

The distinction in the docs seems to be between the language that vm.$set is "For Vue instance" while Vue.set is "For plain data objects" and that Vue.set is global:

文档中的区别似乎在于 vm.$set 是“对于 Vue 实例”而 Vue.set 是“对于普通数据对象”的语言和 Vue.set 是全局的：

However, there are ways to add a property and make it reactive after an instance has been created.

For Vue instances, you can use the $set(path, value) instance method:

但是，有一些方法可以在创建实例后添加属性并使其具有反应性。

对于 Vue 实例，您可以使用 $set(path, value) 实例方法：

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

For plain data objects, you can use the global Vue.set(object, key, value) method:

对于普通数据对象，您可以使用全局 Vue.set(object, key, value) 方法：

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

Finally, I was wondering if the 3rd "option" of doing the above (which is for adding multiple properties at one time) could be used as an equivalent substitute for either of the 2 options above (by adding just 1 property instead of multiple)?

最后，我想知道执行上述操作的第三个“选项”（即一次添加多个属性）是否可以用作上述 2 个选项之一的等效替代品（通过仅添加 1 个属性而不是多个属性） ?

Sometimes you may want to assign a number of properties on to an existing object, for example using Object.assign() or _.extend(). However, new properties added to the object will not trigger changes. In such cases, create a fresh object with properties from both the original object and the mixin object:

有时您可能希望为现有对象分配多个属性，例如使用 Object.assign() 或 _.extend()。但是，添加到对象的新属性不会触发更改。在这种情况下，创建一个具有原始对象和 mixin 对象属性的新对象：

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

回答by David K. Hess

Here is the release note that went with the introduction of Vue.set:

以下是 Vue.set 的发布说明：

Vue no longer extends Object.prototype with $set and $delete methods. This has been causing issues with libraries that rely on these properties in certain condition checks (e.g. minimongo in Meteor). Instead of object.$set(key, value) and object.$delete(key), use the new global methods Vue.set(object, key, value) and Vue.delete(object, key).

Vue 不再使用 $set 和 $delete 方法扩展 Object.prototype。这导致在某些条件检查中依赖这些属性的库（例如 Meteor 中的 minimongo）出现问题。使用新的全局方法 Vue.set(object, key, value) 和 Vue.delete(object, key) 代替 object.$set(key, value) 和 object.$delete(key)。

So, .$setused to be available on allobjects - it is now only available on a View Model itself. Vue.setis therefore used in those cases now when you have a reference to a reactive object but do not have a reference to the View Model it belongs to.

因此，.$set过去可用于所有对象 - 现在仅可用于视图模型本身。Vue.set因此，当您拥有对反应式对象的引用但没有对它所属的视图模型的引用时，现在在这些情况下使用它。

回答by Naren

In simpler terms, Both are same, $setavailable inside component(instance) like this.$set(), where as Vue.setis static method available globally.

简单来说，两者都是相同的，$set可在组件（实例）中使用，如this.$set()，其中Vue.set静态方法全局可用。

this.$set(someobject, 'key', 'value')

this.$set(someobject, 'key', 'value')

Vue.set(someobject, 'key', 'value')

Vue.set(someobject, 'key', 'value')

回答by user11473448

found that add more than one attribute to an object with .$set()only once works well, maybe Vue firstly collected these added attributes to a sequence and then apply these sequence to the getter and setter; e.g.

发现.$set()只给一个对象添加一个以上的属性效果很好，可能Vue先将这些添加的属性收集到一个序列中，然后将这些序列应用到getter和setter中；例如

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

'second','third','fourth'are alse reactive as 'first'

'second','third','fourth'也是反应性的 'first'