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将数字转成货币形式的简单方法

 一款好玩的电子木鱼小程序

 

效果