vue2与vue3数据双向绑定的区别（笔记）

vue2是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

但是vue2双向数据绑定存在问题：

1.Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对property执行 getter/setter转化，所以property必须在 data对象上存在才能让 Vue 将它转换为响应式的。

2.当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

对于以上两种情况也有解决方案，使用$set方法

vue3中的响应式采用了ES6中的Proxy方法

proxy跟Object.defineProperty一样也可以给对象的属性添加两个方法get&set。但是区别于vue2Object.defineProperty一次性只能给对象的一个属性添加get&set方法，而Proxy一次性给对象所有属性都设置get&set方法 

let obj = {
    a: 1,
    b: 2
}
const proxy = new Proxy(obj, {
    get: function(target, prop, receiver) {
        return prop in target ? target[prop] : 0
    },
    set: function(target, prop, value, receiver) {
        target[prop] = 666
    }
})
console.log(proxy.a) // 1
console.log(proxy.c) // 0
proxy.a = 10
console.log(proxy.a) // 666
obj.b = 10
console.log(proxy.b) // 不是666 而是10