Vue2.0与Vue3.0双向数据绑定区别

什么是双向数据绑定？

vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是vue的精髓之处了。

1.Vue2.0通过Object.definePropety来劫持对象属性的getter和setter操作，当数据发生变化时通知
2.Vue3.0通过Proxy来劫持数据，当数据发生变化时发出通知

简单介绍一下Object.definePropety

在MDN上对该方法的说明是：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。重点就是最后的属性描述符。

属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。

这两种对象只能选择一种使用，不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。

然后我们可以通过在存取描述符中的get和set方法内写入自定义的逻辑来实现对象获取属性和设置属性时的行为。

如上图 可简单实现双向数据绑定

简单介绍一下Proxy（代理）

proxy 是ES6的语法

proxy相较于object.defineProperty的优势

1. defineProperty只能监听某个属性，不能对全对象监听
2. Proxy可以监听数组的变化，不用再去单独的对数组做特异性操作
3. 可以检测到数组内部数据的变化

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

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