vm。$ set和Vue.set有什么区别?

我已经仔细阅读并重新阅读了Vue docs “深度反应性”以及vm。$ setVue.set的API,但是我仍然很难确定何时使用它。对我而言,区分两者非常重要,因为在我当前的Laravel项目中,我们正在动态地设置对象的许多属性。

文档中的区别似乎在于vm。$ set是“用于Vue实例”而Vue.set是“用于纯数据对象”与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

最后,我想知道是否可以将执行上述操作的第三个“选项”(一次添加多个属性)用作上述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 })
2020/03/12 12:48:38

这是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以前在所有对象可用-现在仅在视图模型本身上可用。Vue.set因此,当您具有对反应性对象的引用但没有对它所属的视图模型的引用时,则在当前情况下使用。