Vue3.0 里为什么要用 Proxy API 替代 defineProperty API?[面试题]

1:defineProperty API的局限性最大的原因就是它只能针对单个做监听

Vue2.X中的响应式实现正是基于defineProperty中的descriptor,对data中的属性做了遍历+递归,为每个属性设置了getter、setter。这也是为什么Vue只能对data中预定义过的属性做过响应的原因,在VUE中使用下标的方式直接修改属性的值或者添加一个预先不存在的对象属性事无法做到setter监听的,这是defineProperty的局限性

2:Proxy API的监听事针对一个对象的,那么对这个对象所有操作会进入监听操作,这就完全可以代理所有的属性,将会带来很大的性能提升和更优的代码。

Proxy可以理解成,在目标对象之前设置一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。

3:响应式是懒惰的

在Vue.js2.X中,对于一个深层属性嵌套的对象,要劫持它内部深层次的变化,就需要递归遍历这个对象,执行Object.defineProperty把每一层对象的数据都变成一个响应式的,这无疑会有很大的性能消耗。

在Vue.js 3.0中,使用Proxy API并不能监听到对象内部深层次的属性变化,因此她的处理方式是在getter中去递归响应式,这样的好处是真正访问到的内部属性才会变成响应式,简单的可以说是按需响应式,减少性能消耗

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值