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数据响应，Vue的数据响应主要是依赖了Object.defineProperty()，下面就具体来介绍一下如何实现数据响应2018-11-11
这篇文章主要介绍了浅谈vue首次渲染全过程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
本篇文章主要介绍了基于vue的换肤功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
下面小编就为大家分享一篇Vuex中mutations与actions的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要给大家介绍了关于Vue动态样式几种常用方法总结的相关资料,在我们的前端界面中,很多的地方的样式都是不确定的状态,要根据其他内容的变化而变化样式的,需要的朋友可以参考下2023-08-08
关于vue的element-ui web端引入高德地图并获取经纬度
这篇文章主要介绍了关于vue的element-ui web端引入高德地图并获取经纬度,高德地图首先要去申请key和密钥,文中提供了部分实现代码和解决思路,感兴趣的朋友可以学习一下2023-04-04
这篇文章主要介绍了如何在vue项目中使用百度地图API，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了浅谈关于vue中scss公用的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了在vue项目中promise解决回调地狱和并发请求的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最近一直在做的项目是Vue2搭建的项目，本文主要介绍了Vue全局自定义指令Modal拖拽的实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论