vue数据双向绑定的原理以及Object.defineProperty 和 Proxy 的区别

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

        第一步:对observe 的数据对象进行递归遍历，把所有的子属性对象都加上 setter 和 getter,当给这个对象的某个值赋值时，就会触发 setter，监听到了数据的变化

        第二步:compile 解析模板指令，将模板中的变量替换成数据,然后渲染视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者， 一旦数据有变动，更新视图.

        第三步:订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是在实例化时往属性里面添加自己,且自身必须有一个 update()方法,待属性变动时,能调用自身的 update()方法，并触发 Compile 中绑定的回调.

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

Object.defineProperty 和 Proxy 的区别

 Proxy(代理) 的优势如下:

1.Proxy 可以直接监听对象而非属性；

2.Proxy 可以直接监听数组的变化；

3.Proxy 有多达 13 种拦截方法

4.Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；

这些都是Object.defineProperty不具备的；

但是Object.defineProperty的兼容性较好,Proxy 的存在浏览器兼容性问题