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对数组也是有效传送门
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Vue中安装element-ui失败问题原因及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要给大家总结介绍了关于vue工程师必会封装的埋点指令思路知识,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2021-12-12
vue-resource post数据时碰到Django csrf问题的解决
这篇文章主要介绍了vue-resource post数据时碰到Django csrf问题的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-03-03
这篇文章主要介绍了详解Vue3.0 前的 TypeScript 最佳入门实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
最近项目中又使用了vue,所以来给大家总结下,下面这篇文章主要给大家介绍了关于vue的常用实例方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
最近在学习vue,学习中遇到了一些感觉挺重要的知识点,感觉有必要整理下来,这篇文章主要给大家介绍了关于Vue.js中计算属性、监视属性的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要给大家介绍了关于Vue CLI3基础学习之pages构建多页应用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue CLI3具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
本文详细介绍了VueRouter 路由的概念、规则、基础等相关内容，文中运用大量的图片进行讲解，感兴趣的小伙伴可以看一看这篇文章2021-08-08
这篇文章主要介绍了vue中为什么在组件内部data是一个函数而不是一个对象,本文通过示例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
最近小编在学习vue.js ,发现里面有好多好玩的东东，今天小编给大家分享Vue.js2.0中的变化，小编会在日后给大家持续更新的，感兴趣的朋友参考下吧2017-10-10
最新评论