vue2实现数组push/pop/shift/unshift方法重写

// 获取数组原型
const orginalPrototype = Array.prototype

// 备份用来重新操作
const arrPrototype = Object.create(orginalPrototype)
const newArr = ['push', 'pop', 'shift', 'unshift']
newArr.forEach(methods => {
    // 自定义数组
    arrPrototype[methods] = function() {
        // 原来数组操作
        orginalPrototype[methods].apply(this, arguments)

        // 覆盖操作:通知更新
        console.log('数组执行', methods, arguments)
    }
})

// 对象实现defineReactive数据响应式
function defineReactive(obj, key, val) {
    // 解决多层嵌套问题 如果当前的值是obj那么继续递归
    observe(val)

    Object.defineProperty(obj, key, {
        get() {
            console.log('get', key)
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                console.log('set', key, newVal)
                // 为了防止重新对已经绑定的值再次重新赋值
                observe(val)
                // 赋值
                val = newVal
            }
        }
    })
}

// 遍历obj所有的key 对所有属性绑定响应式
function observe(obj) {
    if (typeof obj !== 'object' || obj === null) {
        return
    }

    // 判断传入分obj是数组还
    if (Array.isArray(obj)) {
        // 覆盖原型,替换原先数组操作方法
        // eslint-disable-next-line no-proto
        obj.__proto__ = arrPrototype
        // 对数组进行数据绑定

        for (let i = 0; i < obj.length; i++) {
            observe(obj[i])
        }
    }

    // 遍历所有的key,做响应式处理
    Object.keys(obj).forEach(key => {
        defineReactive(obj, key, obj[key])
    })
}

重写方法测试

// 绑定数据
const obj = {
    foo: 'foo',
    bar: 'bar',
    data: {
        a: 1,
        c: {
            h: 19999
        }
    },
    arr: []
}

// 数据绑定
observe(obj)

// 数组响应式操作
obj.arr.push(888)
obj.arr.push(999)
obj.arr.push(1000)

obj.arr.shift()
obj.arr.pop()
obj.arr.unshift(222)

console.log(obj.arr)

修改监听到测试结果：

get arr
数组执行 push [Arguments] { '0': 888 }
get arr
数组执行 push [Arguments] { '0': 999 }
get arr
数组执行 push [Arguments] { '0': 1000 }
get arr
数组执行 shift [Arguments] {}
get arr
数组执行 pop [Arguments] {}
get arr
数组执行 unshift [Arguments] { '0': 222 }
get arr
[ 222, 999 ]