我仔细阅读并重新阅读了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有什么区别?
发布评论