記錄vue不能檢測數組和對象變更的方法。

測試數據：

items: [
    {name: '業務狀態', id: 'taskState', data: [{name:'所有', id: 0},{name:'進行中', id: 1},{name:'已完成', id: 2},{name:'已歸檔', id: 3},{name:'已終止', id: 4}]},
    {name: '業務狀態', id: 'taskState', data: [{name:'所有', id: 0},{name:'進行中', id: 1},{name:'已完成', id: 2},{name:'已歸檔', id: 3},{name:'已終止', id: 4}]},
    {name: '業務狀態', id: 'taskState', data: [{name:'所有', id: 0},{name:'進行中', id: 1},{name:'已完成', id: 2},{name:'已歸檔', id: 3},{name:'已終止', id: 4}]},
    {name: '業務狀態', id: 'taskState', data: [{name:'所有', id: 0},{name:'進行中', id: 1},{name:'已完成', id: 2},{name:'已歸檔', id: 3},{name:'已終止', id: 4}]},
  ]

難點：

1. items是個數組，裏面嵌套着許多層對象。固然數據是不同的，我這裏只是舉例說明。
2. 這裏面存在着二個難點，第一，直接改變items數量，vue是檢測不到的。第二，增長items[i]裏的對象屬性。vue也是檢測不到。
3. 固然按照vue官方文檔的解釋，檢測不到的主要問題是JavaScript致使的。（尤雨溪大佬你說的算）

---

代碼：

// 解決辦法    
this.$set(this.items, 0, Object.assign({}, this.items[0], { active: 0, defaultActive: 0 }))

// 實際應用
this.items.forEach((r, row) => { // 變量數組，給每一個對象附上默認值
    this.$set(this.items, row, Object.assign({}, this.items[row], {
      thisActive: r.thisActive ? r.thisActive : 0,
      defaultActive: r.defaultActive ? r.defaultActive : 0,
      data: r.data ? r.data : [],
      pageIndex: r.pageIndex ? r.pageIndex : 1,
      pageSize: r.pageSize ? r.pageSize : 20,
      options: r.options ? r.options : {scrollbar: true, pullUpLoad: true},
      ref: r.ref ? r.ref : 'scroll' + row
    }))
})

這裏解釋一下，下列代碼，是解決對象不能檢測的問題，這裏是一次性添加多個屬性的方法。

let test = Object.assign({}, this.items[0], { active: 0, defaultActive: 0 })

---

下列代碼，是解決數組檢測不到的問題。(對象也能夠用這個方法)
index--索引 'age'|| 13 分別表明對象裏的 鍵||值

this.$set(this.items, index, test)) // 數組方法
this.$set(this.items[index], 'age', 13)) // 對象方法

以上解決方法代碼，來自vue官方文檔連接描述, 看不懂就本身按照文檔的去敲一下。