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

【问题标题】：What is the difference between vm.$set and Vue.set?vm.$set 和 Vue.set 有什么区别？
【发布时间】：2016-08-08 20:10:48
【问题描述】：

我已经仔细阅读并重新阅读了 Vue 文档 "Reactivity in Depth" 以及 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, 值）方法：

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 })

【问题讨论】：

我不明白你的问题。你这么说，vm.$set 是用于实例的，而 Vue.set 是用来定义响应式数据的。
如果你能解释两者之间的区别以及第三个选项如何适应，那么你就会得到我的问题的答案

标签： javascript laravel vue.js

【解决方案1】：

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

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

所以，.$set 曾经可用于所有对象 - 现在它仅可用于视图模型本身。因此，Vue.set 现在用于当您引用了一个响应式对象但没有引用它所属的 View Model 的情况。

【讨论】：

谢谢你，大卫。那么总是使用 Vue.set 会更好吗？除了可以设置多个键/值之外，第三个选项如何适应这一点？
我认为第三种选择确实是一种性能折衷。 Vue.set 和 vm.$set 将是非常有针对性的操作，而新的对象分配方法将更加昂贵。如果要将一个属性添加到具有许多属性的现有对象，请使用其中一个 set 调用。如果您要向一个现有属性很少的对象添加许多属性，请使用分配方法。

【解决方案2】：

发现用.$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' 也像 'first' 一样反应

【讨论】：

【解决方案3】：

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

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

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

【讨论】：