Vue 3.0 对数据双向绑定的改进

1、Object.defineProperty 的缺陷

熟悉 Vue 的人都知道，在 Vue2.x 之前都是使用 Object.defineProperty() 来实现双向数据双向绑定（数据响应式）的，如果你对此有疑问的话，可以看一下我的这篇博客：深入 Vue 2.x 数据响应式原理。但是这个 Object.defineProperty() 的方法是有挺多缺陷的，下面对该方法的几个缺陷做如下的具体介绍：

• 1.1、无法检测到新的属性添加/删除

在开发过程中，我们可能会遇到这样一种情况：当在 Vue 实例中的 data 里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

根据当时的官方文档定义：如果在 Vue 实例创建之后，添加新的属性到实例上，是不会触发视图更新的。

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty() 把这些属性全部转为 getter/setter，从而实现对 data 的监听，从而实现一旦 data 改变就刷新视图的效果。但是如果是后来追加的属性，则是不会调用 Object.defineProperty() 对新属性进行监听的，如果新属性改变了，虽然数据在内存中的值会改变，但是 Vue 实例是监听不到新的属性的，所以不会调用 render() 函数对视图进行刷新。

对于这种情况，Vue 2.x 提出的解决办法是 Vue.$set()，有兴趣的同学可以参考这里：给对象新增属性（使用Vue.$set()）。

• 1.2、无法监听数组的变化

Object.defineProperty() 只能对属性进行数据劫持，不能对整个对象进行劫持，同理无法对数组进行劫持，但是我们在使用 Vue 框架中都知道，Vue 通过遍历属性或者数组的项进行观察，实现数据劫持，但是这个劫持是有缺陷的。

即无法监听数组根据 index 对于元素的赋值（因为数组是在实例化过程中遍历数组进行observe 的），如果这样赋值就相当于把 index 的指向变成了一个新的位置，但是这个位置的对象是没有进行 observe 的。

Vue 能够监听数组变化的场景：（1）通过赋值的形式改变正在被监听的数组；（2）通过 splice(index,num,val)的形式改变正在被监听的数组；（3）通过数组的 push() 的形式改变正在被监听的数组；

Vue 无法监听的数组变化的场景：（1）通过数组索引改变数组元素的值；（2）改变数组的长度；

解决无法监听数组变化的方法：（1）this.$set(arr, index, newVal)；（2）通过 splice(index，num，val)；（3）使用临时变量作为中转，重新赋值数组；

补充：Vue 2.x 针对数组是在源码中单独进行处理的，将数组的原始方法进行变异：push()，pop()，shift()，unshift()，splice()，sort()，reverse()。（这就是为什么你在控制台打印一个数组，数组最后会多一个 observer 项）。

• 1.3、需要深度遍历，浪费内存

Vue 通过遍历属性或者数组的项进行观察，实现数据劫持，如果在嵌套比较深的情况下，是需要深度遍历，这样会浪费内存（对象深度遍历）。

2、Vue 3.0 的数据双向绑定原理

基于上述的问题，Vue 3.0 进行了改进：使用 ES6 的 Proxy 对象，通过 reactive() 函数给每一个对象都包一层 Proxy，通过 Proxy 监听属性的变化，从而实现对数据的监控。以下是 reactive() 函数的部分源码：

let toProxy = new WeakMap()    //正向缕存
let toRaw = new WeakMap()      //反向缓存
function reactive(target){     //构建 Proxy 监听对象
    let observed = toProxy.has(target)    //判断是否已经监听
    if(observed){
        return observed
    }
    if(toRaw.has(target)){    //判断是否是 observed，避免重复代理
        return target
    }
    observed = new Proxy(target, handle)
    //handle监听方法
    toProxy.set(target, observed)//缓存存储
    toRaw.set(observed, target)
    return observed //返回被被监听的对象，读取/修改observed时触发Proxy中的get/set方法
}

在看这部分源码之前最好能看一下阮一峰大佬的 ES6 相关的 Proxy、Reflect、Set 和 Map 数据结构 → 传送门。

这代码中声明了两个缓存，toProxy 和 toRaw，前者用于监测属性是否被监听过，如果已经被监听了就直接返回之前存储在缓存中的 observed。第二个缓存，如果传入的是 observed，从 toRaw 的 WeakMap 里面直接查找，如果存在就可以不进行代理，这样可以避免重复代理。

这里介绍一下 handle 方法，里面有 getter/setter，其中 getter 中有 track 方法用于依赖收集，setter 中有 trigger 方法用于触发修改跟新。

3、之前的问题得到了完美的解决

Vue 3.0 版本相比 2.0 增加了 Proxy 之后，就可以直接拦截所有对象类型数据的操作，对数组也是支持的，同时具有一个缓存的机制，多层对象嵌套的时候就可以使用懒代理。

注意：Vue 3.0 版本对数组的 ADD/DELETE 方法进行了单独处理，因为一旦改变了数组的长度，除了去触发数组内容的 set 方法之外，还会触发数组长度的 set 方法，所以这个时候是需要避免多次调用 set 方法的。