脚本宝典收集整理的这篇文章主要介绍了Vue2中无法检测到数组变动的原因及解决,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
由于JavaScript 的限制,Vue 不能检测以下数组的变动:
VAR vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是响应性的 vm.items.length = 2 // 不是响应性的
手动添加监听 // Vue.set Vue.set(vm.items, indexOfItem, newValue) vm.$set(vm.items, indexOfItem, newValue) 使用数组的变异方法,因为vue对数组的变异方法实现了响应式 // Array.PRototyPE.splice vm.items.splice(indexOfItem, 1, newValue)
官方文档中对于这两点都是简要的概括为“由于JavaScript的限制”无法实现,而Object.defineProperty是实现检测数据改变的方案,那这个限制是指Object.defineProperty吗?
其实原因并不是因为Object.defineProperty()存在漏洞,而是出于性能问题的考虑。 Object.defineProperty 在数组中的表现和在对象中的表现是一致的,数组的索引就可以看做是对象中的 key 。
所以, Object.defineProperty 是有监控数组下标变化的能力的,只是vue2.x放弃了这个特性。
Object.property是可以检测到通过索引改变数组的操作的,而Vue没有实现。那我们看看源码:
Vue3.0中则用Proxy代替了Object.defineProperty()解决了其存在的问题
以上就是Vue2中无法检测到数组变动的原因及解决的详细内容,更多关于Vue2 数组变动的资料请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的Vue2中无法检测到数组变动的原因及解决全部内容,希望文章能够帮你解决Vue2中无法检测到数组变动的原因及解决所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。