V2 与 V3 响应式原理区别

v2通过 对象的数据劫持 通过 get set 方法来获取 或者是赋值

Vue2.0实现MVVM(双向数据绑定)的原理是通过 Object.defineProperty 来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。Vue 3.0实现响应式基于ES6的Proxy。两者的差异如下:

  • Vue2.0
  1. 基于Object.defineProperty,不具备监听数组的能力,需要重新定义数组的原型来达到响应式。
  2. Object.defineProperty 无法检测到对象属性的添加和删除 。
  3. 由于Vue会在初始化实例时对属性执行getter/setter转化,所有属性必须在data对象上存在才能让Vue将它转换为响应式。
  4. 深度监听需要一次性递归,对性能影响比较大。
  5. 每次只能监听一个属性,多个属性需要循环监听,浪费性能


V3 通过代理对象 Proxy 当为代理对象赋值的时候就修改了data对象的属性

  1. 基于Proxy和Reflect,可以原生监听数组,可以监听对象属性的添加和删除。
  2. 不需要一次性遍历data的属性,可以显著提高性能。
  3. 因为Proxy是ES6新增的属性,有些浏览器还不支持,只能兼容到IE11 。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值