This is the fourth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

The problem

– Modifying array elements directly does not trigger view updates.

	 this.item.array[0] = 'b'
Copy the code

– Adding elements directly to an object does not trigger view updates

	 this.item.aa = 'aa'
Copy the code

View updates are not triggered

     

The official explanation

When you pass a normal JavaScript Object to the Data option of a Vue instance, Vue will walk through all the properties of the Object and use object.defineProperty to turn them into getters/setters. Object.defineproperty is a non-shim feature in ES5, which is why Vue does not support IE8 and earlier browsers. Getters/setters are not visible to the user, but internally they let Vue track dependencies and notify changes when properties are accessed and modified. One thing to note here is that the browser console does not format getters/setters differently when printing data objects, so you may need to install Vue-devTools for a more user-friendly inspection interface. Each component instance has a corresponding Watcher instance object, which records the properties as dependencies during component rendering, and then when the setters for the dependencies are called, informs watcher to recalculate, causing its associated component to be updated.

There are several ways to trigger view updates

Vue.set can set the value of an object or array. View updates can be triggered by key or array index

An array of changes

Vue.set(array, indexOfItem, newValue)
Copy the code

Object to modify

Vue.set(obj, keyOfItem, newValue)
Copy the code

       

2. Vue.delete Deletes an element from an object or array, triggering view updates through a key or array index

An array of changes

Vue.delete(array, indexOfItem)
Copy the code

Object to modify

Vue.delete(obj, keyOfItem)
Copy the code

       

3. The array object modifies the properties directly, triggering view updates

this.array[0].isShow= true;
this.array.forEach(function(item){
    item.isShow= true;
});
Copy the code

       

4. Assigning an array to a new array triggers view updates

this.array = this.array.filter(...)
this.array = this.array.concat(...)
Copy the code

       

5.Vue provides the following array mutation method to trigger view updates

Vue official: Vue wraps changes to the listened array methods, so they also trigger view updates. These wrapped methods include

push()
pop()
shift()
unshift()
splice()  
sort()
reverse()
Copy the code