vue2如何重写数组

Vue中使用Object.defineProperty重新将对象中的属性定义，如果是数组的话需要重写数组原型上的方法。

代码如下：

function notify() {
    console.log('视图更新')
}
let data = {
    name: 'jw',
    age: 18,
    arr: [1,2,3]
}
// 重写数组的方法
let oldProtoMehtods = Array.prototype;
let proto = Object.create(oldProtoMehtods);
['push', 'pop', 'shift', 'unshift'].forEach(method => {
    proto[method] = function (...args) {
        let inserted;
        switch (method) {
            case 'push':
            case 'unshift':
                inserted = args;
                break;
        }
        observerArray(inserted)
        notify();
        oldProtoMehtods[method].call(this, ...args)
    }
})
function observerArray(obj) { // 观察数组中的每一项
    for (let i = 0; i < obj.length; i++) {
        observer(obj[i]);
    }
}
function observer(obj) {
    if(typeof obj !== 'object'){
        return obj
    }
    if (Array.isArray(obj)) {
        obj.__proto__ = proto
        observerArray(obj);
    }else{
        for (let key in obj) {
            defineReactive(obj, key, obj[key]);
        }
    }
}
function defineReactive(obj, key, value) {
    observer(value); // 再一次循环value
    Object.defineProperty(obj, key, { // 不支持数组
        get() {
            return value;
        },
        set(val) {
            notify();
            observer(val);
            value = val;
        }
    });
}
observer(data);
data.arr.push({name:'jw'})
console.log(data.arr);