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

Question

我仔细阅读并重新阅读了Vue文档" Resetivity in Depth"以及vm.$ set和Vue.set的API,但我仍然很难确定何时使用哪个.我能够区分这两者是很重要的,因为在我目前的Laravel项目中,我们动态地在对象上设置了很多属性.

文档中的区别似乎是vm.$ set为"For Vue instance"的语言,而Vue.set为"For plain data objects"且Vue.set为global:

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

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

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

对于纯数据对象,可以使用全局Vue.set(对象,键,值)方法:

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

最后,我想知道上面做的第三个"选项"(用于一次添加多个属性)是否可以用作上述2个选项中的任何一个的等效替代(通过仅添加1个属性而不是多个) ？

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

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

Answer 1

这是随着Vue.set的引入而发布的发行说明:

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

因此,.$set以前在所有对象上都可用- 它现在仅在View Model本身上可用.Vue.set因此,当你引用一个被动对象但没有对它所属的视图模型的引用时,就会出现这种情况.

Answer 2

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

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

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