- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- vue中无法检测数组变动怎么回事，如何处理
vue中无法检测数组变动怎么回事，如何处理
Admin 2022-07-09 群英技术资讯 1124 次浏览
在这篇文章中，我们来学习一下“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()解决了其存在的问题
上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"vue中无法检测数组变动怎么回事，如何处理"的内容，大家可以关注群英网络的其它相关文章。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
JavaScript中的GMT和UTC时区的区别在哪？
这篇文章主要给大家分享关于GMT和UTC时区及它们区别的内容，在JavaScript中我们常会使用Date来打印不同的时区，因此了解GMT和UTC时区还是很有必要的，接下来就跟随小编一起来看看吧。
-
用JavaScript实现鼠标调整div大小的代码示例
本文实例为大家分享了JavaScript实现鼠标拖拽调整div大小的具体代码，供大家参考，具体内容如下。鼠标拖拽调整div大小的功能，类似于我们查看街景地图时，对缩小地图的操作。那么我们用JavaScript如何实现这样的效果呢？
-
react如何配置代理规则
本文主要介绍了react脚手架配置代理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
-
浅谈那些JavaScript数据可视化库，看看哪个适合你
这篇文章我们来简单了解JavaScript数据可视化库，对于 JS 开发人员来说，可视化数据的能力与制作交互式网页一样有价值。下文给大家介绍了很多受欢迎或有趣的JavaScript数据可视化库，感兴趣的朋友就继续往下看吧。
-
jQuery中清除兄弟元素的方法是什么，代码怎样写？
jQuery中清除兄弟元素的方法是什么？在jQuery中，我们想要清楚兄弟元素，可以使用到remove()方法，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前：400-678-4567
7x24小时售后：0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话：010-58813000
服务邮箱：service@cnnic.cn
投诉与建议：0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准（ICP备案）粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
