review vue.js official documents

A variation of the array (an array of update)

Method Vue.js internal variability (mutating methods, including push (), pop (), shift (), unshift (), splic observed array
e (), sort () and Reverse ()) been blocked, so calling these methods will also be automatically triggered view updates.

// Update the following trigger DOM
demo.items.unshift ({childMsg: 'Baz'})
demo.items.pop ()

Whether or a non-variant array variant array, when the array value is changed, the address pointer will not be changed. And vue is a data-driven frame, when the array value change, naturally want to view-dependent changes in the data update also triggers. Used vue small partners know that when the array changes, the view is also updated. That vue help us to do what things do, let us take a closer look in-depth source of it.

// VUE 2.6   
// the src / Core / Observer / array.js 
const = arrayProto Array.prototype; // get an array of the prototype object 
const = arrayMethods the Object.create (arrayProto); // create a new object and points to an array __proto__ prototype object 
const Methods = [ 'Push', 'POP', 'Shift', 'the unshift', 'splice', 'Sort', 'Reverse' ]; 

/ * * 
 * Intercept mutating Methods and EMIT Events 
 * / 
methods.forEach (Method => { 
    const Original = arrayProto [Method]; 
    the let Val = function mutator (... args) { 
        const Result = Original.apply(this, args); //缓存原始方法
        let inserted = null;
        switch (method) {
            case 'push':
                inserted = args;
                break;
            case 'unshift':
                inserted = args;
                break;
            case 'splice':
                inserted = args.slice(2); // array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) [item])
                break;
        }
        if(inserted The) observeArray (inserted The); // get the value inserted is provided and responsive listening 
        Notify (); // notify dependent image update 
        return Result; 
    } 
    
    Object.defineProperty (arrayMethods, Method, { 
        value: Val, 
        Writable: to true , 
        Configurable: to true , 
        Enumerable: to true 
    }) 
}) 

const observeArray = function observeArray (inserted The) { // shorthand, [embodied] (https://github.com/vuejs/vue/blob/2.6/src/core/ Observer / the index.js) 
    the console.log (inserted the); // array elements to form new
    the console.log ( 'monitor responsive array' ); 
} 

const Notify = function Notify () { 
    the console.log ( 'view updated' ); 
}

In the conventional phase Vue, responsive to treatment with Object.defineProperty data is intercepted, and this method can not monitor internal changes to the array, the array length changes, changes in the array taken like, we need to perform these operations hack, let vue able to monitor changes in them.

Thus, when changing the value of the array index is not available directly. These changes can not be detected Vue.js to. You should use extended $ set () method

// do not use demo.items `[0] = ...`
demo.items $ SET (0, {childMsg: '! The Changed'}).

$ remove () just syntactic sugar splice () method. It is removed to the element at the given index. When the parameter is not the value, $ remove () will search for the value and deletes the corresponding array element of the first discovery of:

// delete the index for the element zero.
demo.items. $ remove (0)