VUE2~VUE3双向数据绑定的原理和区别

　在 vue 的 2.x 版本中⽤ object.defineProperty 来实现双向数据绑定原理，⽽在 vue3.0 版本中⽤

Proxy 这个对象来代替 object.defineProperty 实现数据的双向绑定。但是换汤不换药，这俩种数据双向

绑定都是基于数据劫持来实现的。

　 数据劫持： 当访问或者设置对象的属性的时候，触发相应的函数，并且返回设置属性的值。

　　 1.VUE2.0 通过 Object.defineProperty 来劫持对象属性的 getter 和 setter 操作，当数据发⽣变化时

发出通知

　　 2.VUE3.0 通过 Proxy 来劫持数据，当数据发⽣变化时发出通知

3. 数据劫持的优势：

　　①不需要进⾏显示调⽤， vue 的双向绑定原理就是通过数据劫持 + 发布订阅来实现的，⽐如 angular

的脏检查需要通过显示调⽤ markForCheck ， react 则需要通过 setState 来进⾏显示调⽤

　　②通过属性的劫持可以精准获得变化的内容，这部分不需要额外的 diff 操作，减少性能消耗

VUE2.X 与 VUE3.0 的数据双向绑定的原理及实现

1.vue2.x 双向绑定实现

2.vue3.0双向绑定实现 

 3.proxy相较于object.defineProperty的优势

直接监听对象⽽⾮属性

直接监听数组的变化

拦截⽅式较多（有 13 种⽅式）

Proxy 返回⼀个新对象，可以只操作新对象达到⽬的，⽽ Object.defineProperty 只能遍历对象属性

直接修改（需要⽤深拷⻉进⾏修改）

Proxy 作为新标准将受到浏览器⼚商重点持续的性能优化

　　 不知道⼤家有这样的疑问没？既然 proxy 作为 ES6 的语法并且还有这么多的优点，为啥不在之前 2.X 版本中就⽤ Proxy?(ES6 可⽐ vue2.0 版本出现的早哈 )

　　其实还是兼容性的问题，毕竟作为 ES6 的新语法兼容性不好，最主要就是 proxy 不能⽤ polyfill 来兼容 （polyfill 主要抚平不同浏览器之间对 js 实现的差异）