揭幕Vue3的proxy能做到速度加倍内存减半原因

vue初始化过程

我们知道，vue的初始化过程，有三座大山，分别为Observer、Compiler和Watcher，当我们new Vue的时候，会调用Observer，通过Object.defineProperty来对vue对象的data，computed或者props（如果是组件的话）的所有属性进行监听，同时通过compiler解析模板指令，解析到属性后就new一个Watcher并绑定更新函数到watcher当中，Observer和Compiler就通过属性来进行关联，如此，当Observer中的setter检测到属性值改变的时候，就调用属性对应的所有watcher，调用更新函数，从而更新到属性对应的dom。

这里面有两点需要强调下：
1、Object.defineProperty需要遍历所有的属性，这就造成了如果vue对象的data/computed/props中的数据规模庞大，那么遍历起来就会慢很多。
2、同样，如果vue对象的data/computed/props中的数据规模庞大，那么Object.defineProperty需要监听所有的属性的变化，那么占用内存就会很大。

Object.defineProperty VS Proxy

Object.definePropety的缺点

除了上面讲，在数据量庞大的情况下Object.defineProperty的两个缺点外，Object.defineProperty还有以下缺点。
1、无法监听es6的Set、WeakSet、Map、WeakMap的变化；
2、无法监听Class类型的数据；
3、属性的新加或者删除也无法监听；
4、数组元素的增加和删除也无法监听。

Proxy应运而生

针对Object.defineProperty的缺点，Proxy都能够完美得解决，它唯一的缺点就是，对IE不友好,所以vue3在检测到如果是使用IE的情况下（没错，IE11都不支持Proxy），会自动降级为Object.defineProperty的数据监听系统。所以如果是IE用户，那么就享受不到速度加倍，内存减半的体验了。