Vue2.0、3.0双向数据绑定

引言

大家都知道Vue双向数据绑定就是指v-model指令，而v-model的本质就是input、value的语法糖，语法糖就是方便我们代码编写，那么它底层又是怎样实现的呢？本篇将会以不同的vue版本为切入点，进行模拟实现。

vue2.0-Object.definedProperty()

缺点

1. 不能直接监控数组，而是间接重写Array.prototype上的数组方法(就是vue中常常听见的数组变异方法)比如push、unshfit…属性,监听数组原型上的这些方法,进而实现更新

2. 如果被监听对象在执行监听之后又重新添加了属性,这些属性值则无法监听到

vue3.0-Proxy&Reflect

        let oProxy = new Proxy(data, {
            get(target, key, receiver) {
                console.log(1)
                return Reflect.get(target, key);
            },
            set(target, key, newValue, receiver) {
                console.log(1)
                return Reflect.set(target, key, newValue)
            }
        });

说明
ES6的Proxy&Reflect完美解决了ES5Object.definedProperty()缺点，上面已经指出，但是浏览器不能直接兼容，只能间接通过babel语言降级，因此这里只给出关键代码大家了解一下即可。