What is the difference between vm.$set and Vue.set?
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.
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')
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'