vue2.0数据更新，重新渲染视图的三种方法

问题：利用v-for渲染数据，通过方法改变了数据，视图没有更新。

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

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

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

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

解决重点：实现类似this.objArr[index] = newValue的效果，同时能更新视图

解决办法：

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

   
   
//1.Vue.set
Vue.set( this.objArr,index,newValue) //(数组，索引，值)

//2.prototype.splice
this.objArr.splice(index, 1,newValue) //(索引，长度，值)

//3.Object.assign
this.objArr[index] = newValue
this.objArr = Object.assign({}, this.objArr) //存在弊端，该objArr的类型会从数组变成对象
   
   

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

   
   
//1.Vue.set
this.objArr[index].pro = newValue
var tempObj = this.objArr[index]
Vue.set( this.objArr,index,tempObj) //(数组，索引，值)

//2.prototype.splice
this.objArr[index].pro = newValue
var tempObj = this.objArr[index]
this.objArr.splice(index, 1,tempObj) //(索引，长度，值)

//3.Object.assign
this.objArr[index].pro = newValue
this.objArr = Object.assign({}, this.objArr) //存在弊端，该objArr的类型会从数组变成对象
   
   

3.修改数组的长度

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

//2.Object.assign
this.objArr.length = newLength
this.objArr = Object.assign({}, this.objArr) //存在弊端，该objArr的类型会从数组变成对象
   
   

解决实例：

下载地址

推荐阅读：

事件捕获、事件冒泡详解

JS将数字转成货币形式的简单方法

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