Vue2中无法检测到数组变动的原因及解决
官方文档中对于这点简要的概括为“由于JavaScript的限制”无法实现,而Object.defineProperty是实现检测数据改变的方案,那这个限制是指Object.defineProperty吗?其实原因并不是因为Object.defineProperty()存在漏洞,而是出于性能问题的考虑。 Object.defineProperty 在数组中的表现和在对象中的表现是一致的,数组的索引就
·
官方文档中对于这点简要的概括为“由于JavaScript的限制”无法实现,而Object.defineProperty是实现检测数据改变的方案,那这个限制是指Object.defineProperty吗?
其实原因并不是因为Object.defineProperty()存在漏洞,而是出于性能问题的考虑。 Object.defineProperty 在数组中的表现和在对象中的表现是一致的,数组的索引就可以看做是对象中的 key 。
- 通过索引访问或设置对应元素的值时,可以触发 getter 和 setter 方法
- 通过 push 或 unshift 会增加索引,对于新增加的属性,需要再手动初始化才能被 observe 。
- 通过 pop 或 shift 删除元素,会删除并更新索引,也会触发 setter 和 getter 方法。所以,Object.defineProperty 是有监控数组下标变化的能力的,只是vue2.x放弃了这个特性。
总结就是:性能代价和获得的用户体验受益不成正比!
解决方法:
手动添加监听
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
vm.$set(vm.items, indexOfItem, newValue)
使用数组的变异方法,因为vue对数组的变异方法实现了响应式
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
更多推荐
已为社区贡献2条内容
所有评论(0)