vue数组发生变化页面没有更新

本文探讨了Vue中操作一维和二维数组时,视图更新不一致的问题,介绍了使用深拷贝、v-if、$forceUpdate()和$set()方法的解决方案,并解释了JavaScript限制导致的视图不更新原因。
摘要由CSDN通过智能技术生成

我们在使用vue的操作数组的时候,发现一维数组发生改变的时候页面更新,操作二维数组的时候视图却没有更新的情况

如果,你使用了 this.$forceUpdate();
在vue中做一次强制更新,99.9%的情况,是你在某个地方做错了事。

### 一维数组
let objectOrArray = [1,2,3];
#### 我们是可以使用 

//方法一
JSON.parse(JSON.stringify(objectOrArray)); //深拷贝 一般情况下都能解决问题
//方法二
v-if //就是给需要刷新数据点html标签加上v-if,让其重新渲染 (不推荐)
// 方法三
this.$forceUpdate();  //(不推荐)

原因:由于JavaScript的限制,vue不能检测数组和对象的变化;(性能代价和获得用户体验不成正比)。

### 二维数组
let objectOrArray = [
	[{a:1},{b:2}],
	[{c:3},{d:4}]
];
// 如果是这种情况下我们使用上面的方法,试图还是没有更新的话
this.$set(需要改变的对象,"需要改变的对象属性""新值");
let objIndex = [{e:5},{f:6}];
this.$set(this.objectOrArray, 下标, objIndex);
// 这种就更新的 objectOrArray[下标] 的数组,视图也开始更新了
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值