当面试被问到Vue的响应式原理时,可以这样回答

#当面试被问到Vue的响应式原理时,可以这样回答

Vue2是使用object.defineproperty来做的,
在页面刚开始加载时,Vue会遍历data中的所有属性,
然后使用object.defineproerty把这些属性全部转为getter/setter,
当用户访问或修改某个属性时会触发对应的getter/setter方法,然后会通知每个组件实例对应的watch方法,
最后实现视图的更新。

defineproperty的缺点:
1.对于复杂对象需要深度监听,一次性监听到底,它的计算量是非常大的,性能也是不太好的
2.对于新增、删除操作是无法监听的,需要使用到Vue.$set和Vue.$delete来作为辅助
3.需要重写数组的原生方法来实现数组的监听

所以Vue3使用proxy代替Vue2的defineproperty。

proxy的优势:
1.它可以监听整个对象,而不需要遍历监听属性,性能会有所提升
2.它可以直接监听数组的变化,而不需要重写数组的原生方法,它的便利性会增加很多
3.它有多达13种拦截方法,所以它的功能会更强大
4.proxy作为一个新标准,它会收到浏览器厂商持续的性能优化,也就是它会享受到传说中的新标准的性能红利。

解题思路:
1.Vue2是怎么做的?
2.Vue2这种方法有什么问题?
3.Vue3是怎么做的?
4.Vue3又是怎么解决Vue2的这些问题?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值