关于VUE两种数据劫持方法

Object.defineProperty和Proxy本质区别

先简单说下两种的劫持数据方法
采用数组来说明： a=[1,2,3,4,5,6,7]。 长度为7
1、数组的位置不固定位置、数据多变。比如对于头部数据进行了删除，那
整个数据的下标发生改变即为key和value错位
2、那数组a来说，我删除了数据第一项却会触发set方法6次，实际修改了一项如果对所有项劫持造成很大的资源浪费，不利于 event性能
3、在Vue当中可以实现拦截，Vue是重写了Array的7个方法

不多说上例子

const arr = [1, 2, 3, 4, 5, 6，7]
for (let key in arr) {
    let value = arr[key]
    Object.defineProperty(arr, key, {
        get() {
            console.log(`get: ${key}`)
            return value
        },
        set(newValue) {
            console.log(`set: ${key} to ${newValue}`)
            return value = newValue
        }
    })
}

arr[0] = 7 // 打印：set：0 to 999
arr[4] // 打印：get：3
arr.shift() // 会导致6次前移，所以产生6次get和6次set

// 完整打印结果
set: 0 to 7
get: 4
get: 0
get: 1
set: 0 to 2
get: 2
set: 1 to 3
get: 3
set: 2 to 4
get: 4
set: 3 to 5
get: 5
set: 4 to 6
get: 6
set: 5 to 7

下面说下 object.defineProperty 劫持对象情况

Object.defineProperty 只能劫持对象的属性，所以需要进行深度遍历，如果某个属性又是对象还需要再一次深度遍历

Proxy是可以劫持整个对象返回一个新对象，不过Proxy的劫持也是不完全的，若属性是对象仍然需要深度遍历不然也没有办法实时同步更新

总结：Object.defineProperty的劫持必要要预先劫持属性才可以监听，不然监听不到而proxy代理整个对象，在进行修改后会通过 get/set通知key需要获取或者修改。就算是先增属性赋值也可以监听到值。

如有大佬发现不对的地方欢迎留言斧正，小白初入之言望请见谅。