Vue 3.0双向绑定原理的实现
1、vue2.0对比3.0存在问题
在vue2.0中,数据双向绑定就是通过Object.defineProperty去监听对象的每一个属性,然后在get,set方法中来实现的数据响应,
但是存在一定的缺陷,只能监听已存在的属性,对于新增删除属性就无能为力了,同时无法监听数组的变化,所以在Vue3.0中将其换成了功能更强大的Proxy。
Proxy是ES6新推出的一个特性,可以用它去拦截js操作的方法,从而对这些方法进行代理操作。
使用Object.defineProperty无法监听到新增属性,但是使用Proxy是可以监听到的。对比上面两段代码可以发现有以下几点不同
·Object.defineProperty监听的是对象的每一个属性,而Proxy监听的是对象自身
·使用Object.defineProperty需要遍历对象的每一个属性,对于性能会有一定的影响
·Proxy对新增的属性也能监听到,但Object.defineProperty无法监听到。