vue-監聽數組變化

Vue.js觀察數組變化主要通過以下7個方法（push、pop、shift、unshift、splice、sort、reverse）

怎么實現?

通過對data數據中數組的這7個方法進行重新包裝（注意只是data數據中的數組）

為什么不直接對Array.prototype的原型方法進行重新包裝?

因為不應該過多地去影響全局

代碼實現

const patchArray = (function () {
    const methodsToPatch = [
        'push',
        'pop',
        'shift',
        'unshift',
        'splice',
        'reverse',
        'sort'
    ];

//設置對象屬性的工具方法
    function def (obj, key, val) {
        Object.defineProperty(obj, key, {
            value: val,
            enumerable: true,
            writable: true,
            configurable: true
        });
    }

    const arrayProto = Array.prototype, //緩存Array的原型
        arrayMethods = Object.create(arrayProto); //繼承Array的原型

    methodsToPatch.forEach(function (method, index) {
        def(arrayMethods, method, function (...args) {
            //首先調用Array原型的方法
            const res = arrayProto[method].apply(this, args);
            //data中每個數組都有一個__ob__的私有屬性指向創建的Observer實例（有興趣看看源碼中的observe方法，這里不詳述）
            const ob = this.__ob__;

            let inserted = null;

            //記錄插入的值
            switch(method) {
                case 'push':
                case 'unshift':
                    inserted = args;
                    break;
                case 'splice':
                    inserted = args.slice(2);
                    break;
            }

            if (inserted) {
                //如果是調用了push、unshift、splice，則嘗試對新插入的值進行響應式綁定，因為插入的值有可能是對象(Object)或者數組(Array)
                ob && ob.observeArray(inserted);
            }

            console.log('數組發生改變了');

            //向所有依賴發送通知，告訴它們數組的值發生變化了
            ob && ob.dep.notify();
            return res;
        });
    });

    return function (target) {
        //看看瀏覽器支不支持__proto__這個屬性，通過改變__proto__的值，可以設置對象的原型
        if ('__proto__' in {}) {
            //將數組的原型指向arrayMethods，這樣當數組調用上述的7個方法時，其實是調用arrayMethods中的方法而不是調用Array.prototype中的方法
            target.__proto__ = arrayMethods;
        } else {
            //如果瀏覽器不支持__proto__，則設置數組對應的屬性，這樣當數組調用上述的7個方法時，其實是調用數組對應屬性指向的方法
            for (let i = 0, l = methodsToPatch.length; i < l; i++) {
                let key = methodsToPatch[i];
                def(target, key, arrayMethods[key]);
            }
        }
    }
})();

//測試
let arr = [1, 2, 3];
patchArray(arr);
arr.push(4);