2019年12月27日更新：
剛剛看到評論里有朋友評論說，“就粘了點官方文檔，沒有解釋?”
首先，解釋的話，原因就是Object.observe 已經被廢棄了，所以vue不會用一個廢棄jsapi來實現對象屬性監聽。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/observe
然后，記得當時寫這篇文章的時候，就是在強調讀文檔只留下了印象，使用的時候才會有更深的感悟。
現在越來越發現，vue的文檔寫的真的是很好了，遇到的問題在文檔里其實都能找到答案 —— vue響應式原理：https://cn.vuejs.org/v2/guide/reactivity.html。
還有就是最近組織組內伙伴進行技術學習分享的一些感悟：
別人的博客文章終歸是二手知識，使用二手知識的時候，要去文檔驗證一下真偽，文檔可以當做是一手知識。
吃透文檔后就會可以更進一步，源碼才是最接近作者思想的東西，相信讀源碼一定會更有收獲。
-------------------------------------------
原文：
做checkbox多選功能的時候遇到了一個坑，邏輯怎么看都對，但是就是有bug，最后發現數組那里值變了頁面勾選沒有重新渲染。
換了關鍵詞搜索找到了相關方法。
其實之前讀文檔教程的時候看到過這里，但是只有真的使用之后才會有最直接的感觸。
-------------------------------------------
數組更新檢測
變異方法
Vue 包含一組觀察數組的變異方法，所以它們也將會觸發視圖更新。這些方法如下：
push()pop()shift()unshift()splice()sort()reverse()
你打開控制台，然后用前面例子的 items 數組調用變異方法：example1.items.push({ message: 'Baz' }) 。
替換數組
變異方法 (mutation method)，顧名思義，會改變被這些方法調用的原始數組。相比之下，也有非變異 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。這些不會改變原始數組，但總是返回一個新數組。當使用非變異方法時，可以用新數組替換舊數組：
|
example1.items = example1.items.filter(
function (item) {
return item.message.match(/Foo/)
})
|
你可能認為這將導致 Vue 丟棄現有 DOM 並重新渲染整個列表。幸運的是，事實並非如此。Vue 為了使得 DOM 元素得到最大范圍的重用而實現了一些智能的、啟發式的方法，所以用一個含有相同元素的數組去替換原來的數組是非常高效的操作。
注意事項
由於 JavaScript 的限制，Vue 不能檢測以下變動的數組：
- 當你利用索引直接設置一個項時，例如：
vm.items[indexOfItem] = newValue - 當你修改數組的長度時，例如：
vm.items.length = newLength
為了解決第一類問題，以下兩種方式都可以實現和 vm.items[indexOfItem] = newValue 相同的效果，同時也將觸發狀態更新：
|
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
|
|
// Array.prototype.splice
example1.items.splice(indexOfItem,
1, newValue)
|
為了解決第二類問題，你可以使用 splice：
|
example1.items.splice(newLength)
|
對象更改檢測注意事項
還是由於 JavaScript 的限制，Vue 不能檢測對象屬性的添加或刪除：
|
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 現在是響應式的
vm.b =
2
// `vm.b` 不是響應式的
|
對於已經創建的實例，Vue 不能動態添加根級別的響應式屬性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套對象添加響應式屬性。例如，對於：
|
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
|
你可以添加一個新的 age 屬性到嵌套的 userProfile 對象：
|
Vue.set(vm.userProfile,
'age', 27)
|
你還可以使用 vm.$set 實例方法，它只是全局 Vue.set 的別名：
|
this.$set(this.userProfile, 'age', 27)
|
有時你可能需要為已有對象賦予多個新屬性，比如使用 Object.assign() 或 _.extend()。在這種情況下，你應該用兩個對象的屬性創建一個新的對象。所以，如果你想添加新的響應式屬性，不要像這樣：
|
Object.assign(this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
|
你應該這樣做：
|
this.userProfile = Object.assign({}, this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
|