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

Question

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 whi

Answer 1

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

Answer 2

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.

Answer 3

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'