vm。$ set和Vue.set有什么区别？ [英] What is the difference between vm.$set and Vue.set?

问题描述

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

I have carefully read and re-read the Vue docs "Reactivity in Depth" and the API for vm.$set and Vue.set but 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.

文档中的区别似乎是vm。$ set为For Vue instance而Vue.set为For plain data objects的语言之间的区别Vue.set是全局的：

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:

然而，有一些方法可以添加一个属性并在
之后使其成为一个实例已创建。

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

对于Vue实例，您可以使用$ set（路径，值）实例方法：

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

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

对于普通数据对象，可以使用全局Vue.set（对象， key，
value）方法：

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

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

最后，我想知道上面做的第三个选项（用于一次添加多个属性）是否可以用作任何一个的等效替代上面的2个选项（只添加1个属性而不是多个）？

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

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

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:

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

推荐答案

<这是发布Vue.set的发行说明：

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

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

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

所以，。$ set 用于可以在所有对象上使用 - 它现在仅在View Model本身上可用。因此，当您引用被动对象但没有对其所属的视图模型的引用时， Vue.set 就会在这些情况下使用。

So, .$set used to be available on all objects - it is now only available on a View Model itself. Vue.set is 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.

这篇关于vm。$ set和Vue.set有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！