Vue2中无法检测到数组变动的原因及解决
更新时间：2021年06月17日 08:36:10 作者：我是樊少
由于某些限制，vue2不能检测到某些情况下数组的变动，本文就将具体讲解这两种限制的解决思路
由于JavaScript 的限制，Vue 不能检测以下数组的变动：
- 当利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
- 当修改数组的长度时，例如：vm.items.length = newLength
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)
为什么Vue2.0中监听不到两种数组的变化？
官方文档中对于这两点都是简要的概括为“由于JavaScript的限制”无法实现，而Object.defineProperty是实现检测数据改变的方案，那这个限制是指Object.defineProperty吗？
其实原因并不是因为Object.defineProperty()存在漏洞，而是出于性能问题的考虑。 Object.defineProperty 在数组中的表现和在对象中的表现是一致的，数组的索引就可以看做是对象中的 key 。
- 通过索引访问或设置对应元素的值时，可以触发 getter 和 setter 方法
- 通过 push 或 unshift 会增加索引，对于新增加的属性，需要再手动初始化才能被 observe 。
- 通过 pop 或 shift 删除元素，会删除并更新索引，也会触发 setter 和 getter 方法。
所以， Object.defineProperty 是有监控数组下标变化的能力的，只是vue2.x放弃了这个特性。
源码分析
Object.property是可以检测到通过索引改变数组的操作的，而Vue没有实现。那我们看看源码：
Vue3.0
Vue3.0中则用proxy代替了Object.defineProperty()解决了其存在的问题
以上就是Vue2中无法检测到数组变动的原因及解决的详细内容，更多关于Vue2 数组变动的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要给大家介绍了关于利用Vue实现一个图片懒加载的插件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
本篇文章主要介绍了vue+axios实现登录拦截的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了如何利用Vue+TS实现一个简易的语音播放组件，文中的示例代码讲解详细，对我们学习Vue有一定的帮助，需要的可以参考一下2022-03-03
通常我们的项目会越做越大,页面也会越来越多,随之而来的是接口数量的增加,api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护,下面这篇文章主要给大家介绍了关于axios二次封装的详细过程与跨域问题的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue运行环境搭建全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要给大家介绍了关于Vue使用虚拟键盘及中英文切换的相关资料,有时候在大型触屏设备(如双屏设备)中往往就没有键盘去操作,所以就需要去建立一个虚拟键盘去操作,需要的朋友可以参考下2023-06-06
手写可拖动穿梭框组件CustormTransfer vue实现示例
这篇文章主要为大家介绍了手写可拖动穿梭框组件CustormTransfer vue实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
本文详细介绍了在Vue框架中使用el-tree组件创建横向滚动条的方法,通过代码示例和步骤说明,帮助开发者理解和实现横向滚动功能,感兴趣的可以了解一下2024-09-09
这篇文章主要介绍了vue里的axios如何获取本地json数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue 过渡（动画）transition组件案例详解，非常不错，具有参考借鉴价值，需要的朋友参考下2017-01-01
最新评论