Vue的双向数据绑定原理是什么

在vue2.x中,双向数据绑定是通过数据劫持 结合 发布订阅模式的方式来实现的,也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之改变.核心:关于Vue双向数据绑定,其核心是Object.defineProperty()方法.

Vue3.x则是用ES6的语法Proxy对象来实现的.

Object.defineProperty的缺点:

1.只能监听对象(Object),不能监听数组的变化,无法触发push,pop,shift,unshift,splice,sort,

reverse.

2.必须遍历对象的每个属性

3.只能劫持当前对象属性,如果想深度劫持,必须深层遍历嵌套的对象

Proxy的优点：
1. Proxy 可以直接监听对象而非属性。
2. Proxy 可以直接监听数组的变化。
3. Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 
Object.defineProperty 不具备的。
4. Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对
象属性直接修改。
5. Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利。