Vue2和Vue3响应式实现上的区别

Vue2是通过 Object.defineProperty来完成响应式处理,遍历对象所有的property,并将其转化getter/setter。

它是只能针对object实现响应式,对于数组,则需要进行处理。

创建Object.create(Array.prototype) 得到具有数组原型对象。

优点:基于ES5实现,支持绝大部分浏览器

缺点:由于是递归实现监听,如果数据层级较多,会导致初始化时间过长,而且原生不支持监听数组,对象中新增的key无法获取相应性,通过数组下标改变数据时,也无法触发响应式,可通过 $set重新绑定,恢复响应性。

Vue3有两种相应方式:值类型响应式和复杂类型响应式

1、值类型响应式比较简单,直接对该对象设置set和get的方法(ref),获取value。

2、复杂类型响应式是通过使用Proxy和Reflect来完成的响应式处理,也是出来set和get。

优点:速度快,只有get数据是才会添加响应式,不用初始化时深层次递归,可以检测到代理对象属性的动态添加和删除,可以检测到数组的下标和length属性的改变。

缺点:ES6的proxy语法对低版本浏览器不支持,如IE11

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值