vue2中实现响应式的原理object.defineproperty+发布定于模式的缺点

缺点:
1 不能监测到新增属性或者删除属性
2 不能检测到根据数组索引替换或新增的值。也无法监测数组索引的变化。
由于object.defineproperty(对象,描述,对象的某个属性)其实是对对象的某个属性进行修改,因此必须结合发布订阅模式。发布订阅模式其实是深度遍历对象属性,因此在发布订阅之后(在beforecreated和created之间进行发布订阅)之后,再修改属性改变将无法被监测到。

Vue 在 实 例 初 始 化 时 遍 历 data 中 的 所 有 属 性(发布订阅模式) , 并 使 用
Object.defineProperty 把这些属性全部转为 getter/setter。这样
当追踪数据发生变化时,setter 会被自动调用。
Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就
是 Vue 不支持 IE8 以及更低版本浏览器的原因。
但是这样做有以下问题:
1.添加或删除对象的属性时,Vue 检测不到。因为添加或删除的对象
没 有 在 初 始 化 进 行 响 应 式 处 理 , 只 能 通 过 $set 来 调 用
Object.defineProperty()处理。
2.无法监控到数组下标和长度的变化。
Vue3 使用 Proxy 来监控数据的变化。Proxy 是 ES6 中提供的功能,
其作用为:用于定义基本操作的自定义行为(如属性查找,赋值,枚
举,函数调用等)。相对于 Object.defineProperty(),其有以下特
点:


1.Proxy 直接代理整个对象而非对象属性,这样只需做一层代理就可
以监听同级结构下的所有属性变化,包括新增属性和删除属性。
2.Proxy 可以监听数组的变化。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值