我们在使用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[下标] 的数组,视图也开始更新了