浅析vue3.0中的Proxy双向绑定

Vue2.0中的双向绑定
使用object.defineProperty()进行双向绑定
缺点：
1无法对数组进行监听，采用的是对数组的方法进行重写（push, pop,shift,unshift等等）。对此进行双向绑定和数据监听的操作
2效率差，这主要是因为对多层数据进行一次性的递归操作，如果数据很多或者是很深层次，这样性能非常的差
3因为局限性，无法对新加/删除的数据进行监听，所以使用在vue2.0中使用$set进行手动添加

所以在vue3.0中使用的proxy代理的方式进行解决
使用proxy和Reflect进行双向绑定
优点：
Proxy可以对数组和对象进行拦截和监听
缺点：
1Proxy会出发多次set/get响应

解决办法：
一．使用类似于debounce的操作，对其进行优化，使其值响应一次

二．（vue3.0中的解决方式），判断key是否是target的自身属性，以及value是否和target[key]相等，可以避免多余的set/get操作
2Proxy只能代理一层，无法深度监听
一．使用深度递归，对每一层进行监听。巧妙的使用的Reflect.get()会返回对象内层结构的特性（下一层），判断下一层是否还是对象，并且使用深度递归操作。但是在性能上又很大的影响

二．之后，使用weakMap，使用两个weakMap来保存原始数据和可响应数据。访问数据时会从保存的数据中查找，如果没有再对其进行Proxy操作

其中使用到了Proxy和Reflect，如果不懂的可以看看阮一峰老师的ES6入门，写的非常好。其中vue3.0的源码比这个复杂得多，有兴趣的可以看看源码！