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的源码比这个复杂得多,有兴趣的可以看看源码!