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

Question

我已经仔细阅读并重新阅读了 Vue 文档 “深度反应” 以及 vm.$set 和 Vue.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

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

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

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

原文由 Bryan Miller 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是引入 Vue.set 的发行说明：

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

所以， .$set 过去在 所有 对象上都可用——现在它只在视图模型本身上可用。 Vue.set 因此，当你引用了一个反应对象但没有引用它所属的视图模型时，现在在这些情况下使用。

原文由 David K. Hess 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

原文由 Naren 发布，翻译遵循 CC BY-SA 4.0 许可协议