Vue中 数据已改变，视图未更新的情况

使用vue的朋友们大多遇到过这样的情况：当更改了某一数据之后，console.log()该数据会显示已变化，但偏偏视图并不刷新。

原因：由于javascript的限制，Vue不能检测到以下变动的数组

1.通过索引直接设置数组的某个值，this.Arr[index] = newValue;

2.通过索引直接设置数组中对象的某个属性，this.Arr[index].pro = newValue;

3.通过修改数组的长度，this.Arr.length = newLength;

解决办法：

1.索引直接设置数组的某个值

//1.Vue.set
Vue.set(this.objArr,index,newValue)  //(数组，索引，新值)
 
//2.prototype.splice
this.objArr.splice(index,1,newValue) //(索引，长度，新值)

2.索引直接设置数组中对象的某个属性

//1.Vue.set
Vue.set(this.objArr,index,tempObj)  //(数组，索引，新值)
 
//2.prototype.splice
this.objArr.splice(index,1,tempObj) //(索引，长度，新值)

3.修改数组的长度

//1.prototype.splice
this.objArr.splice(this.objArr.length,0,new Object()) //(索引，长度，值) 
//从长度索引开始增加一个新的对象。
 

原文：https://blog.csdn.net/a646070718/article/details/80147075