vue无法监听数组的变化,vue2为什么监听不到数组

　　由于某些限制，vue2在某些情况下无法检测数组变化。本文将详细解释这两个限制的解决方案。

目录

　　解决方案Vue2.0为什么不能监控两个数组的变化？

　　源代码分析

　　Vue3.0

　　由于JavaScript的限制，Vue无法检测到以下数组的变化：

　　直接按索引设置数组项时，例如：vm.items[indexOfItem]=newValue

　　修改数组长度时，例如：vm.items.length=newLength

　　var vm=new Vue({

　　数据：{

　　项目：[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)

　　使用array的variant方法，因为vue实现了对array的variant方法的响应。

　　//Array.prototype.splice

　　vm.items.splice(indexOfItem，1，newValue)

为什么Vue2.0中监听不到两种数组的变化？

　　在官方文档中，这两点被简单总结为“由于JavaScript的限制”，无法实现，而Object.defineProperty是实现数据变化检测的方案。这个限制是指Object.defineProperty吗？

　　其实原因不是因为Object.defineProperty()的漏洞，而是性能问题。数组中Object.defineProperty的表达式与对象中的表达式一致，数组的索引可以视为对象中的键。

　　当索引访问或设置相应元素的值时，可以触发Getter和setter方法。

　　按下或取消移动将增加索引，新添加的属性需要手动初始化才能被观察到。

　　通过pop或shift删除元素将删除和更新索引，并触发setter和getter方法。

　　所以Object.defineProperty有监控数组下标变化的能力，但是vue2.x放弃了这个特性。

源码分析

　　Object.property可以检测按索引改变数组的操作，但是Vue不实现。那我们来看看源代码：

Vue3.0

　　在Vue3.0中，使用proxy代替Object.defineProperty()来解决其存在的问题。

　　以上就是Vue2中无法检测到数组变化的原因以及解决方案的细节。更多关于Vue2中数组变化的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。