Vue不能检测到Object/Array更新的情况的解决
前言
看文档不认真，开发也没有多注意，总是hack。忽悠忽悠就过去，但怎么说，歪门邪道还是不太好，现在就亡羊补牢，总结总结。
数组
索引
- 使用下标更新数组元素；
- 使用赋值方式改变数组长度；
- 使用下标增删数组元素；
正文
使用下标更新数组元素
data: {
arrs: [0, 1, 2, 3]
}
直接使用this.arrs[0] = 'zero';虽然数组确实是被更新了，但是更新不会被渲染到视图（html页面）上。因为Vue没有检测到数组的更新。
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
官方应对方法：
1、Vue.set( target, key, value )
Vue.set(this.arrs, 0, 'zero');
2.vm.items.splice(indexOfItem, 1, newValue)
this.arrs.splice(0, 1, 'zero');
使用赋值方式改变数组长度
即this.arrs.length = 100;无效！
官方应对方法：
1、vm.items.splice(newLength)
this.arrs.splice(100);
使用下标增删数组元素
即一下操作无效：
this.arrs[this.arrs.length] = this.arrs.length;
官方应对方法：变异方法。
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
this.arrs.push(this.arrs.length);
8、替换数组(改变引用)
如官方所言：filter(), concat() 和 slice()都是会返回一个新数组
this.arrs = this.arrs.contact(this.arrs.length); // or // this.arrs = this.arrs.contact([this.arrs.length]);
官方对性能问题的回应：
你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
对象
索引
增删元素；
正文
data: {
foo: { name: 'isaac' }
}
增删元素
this.foo.job = 'coder'; delete this.foo.name;
如上增删元素是无效的。
官方的解决方法：
// 新增 Vue.set(this.foo, 'job', 'coder'); // 删除 Vue.delete(this.foo, 'name');
Vue.delete对数组也是有效传送门
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章给大家介绍了vue3如何实现页面跳转,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
vue3中getCurrentInstance获取组件实例踩坑详细记录
getCurrentInstance()是Vue.js3 Composition API中的一个函数,它的作用是获取当前组件的实例对象,下面这篇文章主要给大家介绍了关于vue3中getCurrentInstance获取组件踩坑的相关资料,需要的朋友可以参考下2024-02-02
这篇文章主要为大家介绍了Vue3源码分析reactivity实现方法原理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
今天小编就为大家分享一篇关于vue-router命名视图的使用讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
vue-cli3自动消除console.log()的调试信息方式
这篇文章主要介绍了vue-cli3自动消除console.log()的调试信息方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vuex实现的简单购物车功能,结合实例形式分析了vuex购物车组件相关商品列表、购物车创建、添加、删除、清空等相关操作技巧,需要的朋友可以参考下2019-02-02
这篇文章主要为大家详细介绍了如何使用Vue3实现列表无限滚动的效果，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起了解一下2023-07-07
vue、react等单页面项目部署到服务器的方法及vue和react的区别
这篇文章主要介绍了vue、react等单页面项目部署到服务器的方法,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了利用Vue实现数字翻滚动画效果,通过Vue的响应式数据更新结合CSS3的动画效果,我们可以实现非常酷炫的数字翻滚效果,给数据可视化带来更多动感和吸引力,需要的朋友参考下吧2024-04-04
Vue3+Element-Plus使用Table预览图片发生元素遮挡的解决方法
这篇文章主要介绍了Vue3+Element-Plus使用Table预览图片发生元素遮挡的问题分析和解决方法,文中通过代码示例讲解的非常详细,对大家解决问题有一定的帮助,需要的朋友可以参考下2024-04-04
最新评论