vue双向数据绑定原理（vue2和vue3的区别）

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

具体步骤

第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步： compile(模板解析器)解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，
并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步： Watcher(订阅者)是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，
则功成身退。

第四步： MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，
通过`Observer`来监听自己的model数据变化，
通过`Compile`来解析编译模板指令，最终利用`Watcher`搭起`Observer`和`Compile`之间的通信桥梁，
达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

区别

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

Vue2.0通过Object.definePropety来劫持对象属性的getter和setter操作，当数据发生变化时通知
Vue3.0通过Proxy来劫持数据，当数据发生变化时发出通知
使用订阅者发布者的模式 结合es6的proxy 的get和set方法来实现数据劫持 进一步集合vue的watcher的updata方法来实现双向绑定

区别：Object.defineProperty要一个一个属性定义set与get 但是Proxy可以定义一个对象所有属性的get与set

Proxy相较于Object.defineProperty()的优势

1. defineProperty只能监听某个属性，不能对全对象监听

2. Proxy可以监听数组的变化，不用再去单独的对数组做特异性操作

3. 可以检测到数组内部数据的变化

4. Vue 双向数据绑定的 { defineProperty() } 的缺点
   通过下标的方式修改数组或者给对象新增属性都无法触发组件的渲染，vue通过重写函数的方式解决了这个问题