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將數字轉成貨幣形式的簡單方法