CODEWITHSUNDEEP
javascriptlaravelvue.js
Bryan Miller
Bryan Miller

Reputation: 3323

What is the difference between vm.$set and Vue.set?

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.

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.

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

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

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

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

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

Upvotes: 50

Views: 78128

Answers (3)

Naren
Naren

Reputation: 4470

In simpler terms, Both are same, $set available inside component(instance) like this.$set(), where as Vue.set is static method available globally.

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

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

Upvotes: 13

user11473448
user11473448

Reputation: 1

found that add more than one attribute to an object with .$set() only once works well, maybe Vue firstly collected these added attributes to a sequence and then apply these sequence to the getter and setter; e.g.

Vue.set(this.b,'first','first');
this.b.second = 'second';
this.b.third = 'third';
this.b.fourth = 'fourth';

'second','third','fourth' are alse reactive as 'first'

Upvotes: 0

David K. Hess
David K. Hess

Reputation: 17246

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

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

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.

Upvotes: 50

Related Questions