Vue.set added responsive to responsive object attribute, and setting a view update trigger array elements

First, why the need to use Vue.set?

　　vue two variations can not be detected and the array of objects:

　　1, the change in length of the array vm.arr.length = 4

　　2, the array content vm.arr [1] = 'aa' by index

　　Vue $ set (target, key, value):. To the array can dynamically add and modify data objects, and updates the display data in the view.

　　When the constructor vue new Vue (), on the adoption of the getter and setter Object.defineProperty these two methods, the completion of the binding data. Therefore directly vm.arr [1] = 'aa' methods can not be changed to the value in the trigger updating vue view, had to be changed by the method Object.defineProperty while Vue. $ Set () to encapsulate js Object.defineProperty underlying methods.

　　So we need to use Vue.set () responsive new and modified data.

Two, Vue.set use

　　Vue can not detect the object properties added or deleted.

　　Since the Vue will perform on the property getter / setter conversion process, so the property must be present on the data object when initializing instance Vue conversion to make it, so as to be responsive in. E.g:

Data () {
     return { 
        form: { 
            Total: 10 
        } 
    } 
} 
 
// this.form.total is responsive to 
 
// if directly increase property, non-responsive to 
the this .form.showFlag = to true   // non-responsive formula

　　Use Vue.set (object, key, value) method of the response attribute to the nested object.Vue.set(this.form, 'showFlag', true)

　　You can also use vm $ set an instance method, which is the alias global Vue.set method:this.$set(this.form, 'showFlag', true)

　　In this way, this.form.showFlag is responsive of the.

　　Vue.set (target, key / index, value) adding a property to a responsive object and ensure that the new attribute is also responsive, and the view update trigger. It must be used to add new attributes to the responsive object because the new Vue unable to detect common attributes (such as  this.obj.newProperty = 'hi')

　　The official document: https://cn.vuejs.org/v2/api/#Vue-set

Vue.set( target, propertyName/index, value )

• Parameters :

  • {Object | Array} target
  • {string | number} propertyName/index
  • {any} value

• Return value : value set.

• Usage :

  Add a property to a responsive object and ensure that the new property is also responsive, and trigger view updates. It must be used to add new attributes to the responsive object because the new Vue unable to detect common attributes (such as this.myObject.newProperty = 'hi')

  Note that the object can not be Vue instance, or instances root data object Vue. Means, SET this method can be used inside the sub-array data objects, but not directly used for data (the plurality of data) or Example vue

var vm = new Vue({
el:"#div",
  data: {
    items: ['a', 'b', 'c']
  }
});
 
Vue.set(vm.items,2,"ling")

　　Set array elements: Vue.set (vm.items, 2, "ling") indicates that the vm.items subscript for the element array 2, to "ling", the array [ "a", "b", "c"] is modified [ "a", "b", "ling"]