深入響應(yīng)式原理
?現(xiàn)在是時(shí)候深入一下了！Vue 最獨(dú)特的特性之一，是其非侵入性的響應(yīng)式系統(tǒng)。數(shù)據(jù)模型僅僅是普通的 JavaScript 對象。而當(dāng)你修改它們時(shí)，視圖會進(jìn)行更新。這使得狀態(tài)管理非常簡單直接，不過理解其工作原理同樣重要，這樣你可以避開一些常見的問題。在這個(gè)章節(jié)，我們將研究一下 Vue 響應(yīng)式系統(tǒng)的底層的細(xì)節(jié)。
目錄
如何追蹤變化
當(dāng)你把一個(gè)普通的 JavaScript 對象傳入 Vue 實(shí)例作為 data 選項(xiàng)，Vue 將遍歷此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。Object.defineProperty 是 ES5 中一個(gè)無法 shim 的特性，這也就是 Vue 不支持 IE8 以及更低版本瀏覽器的原因。
這些 getter/setter 對用戶來說是不可見的，但是在內(nèi)部它們讓 Vue 能夠追蹤依賴，在屬性被訪問和修改時(shí)通知變更。這里需要注意的是不同瀏覽器在控制臺打印數(shù)據(jù)對象時(shí)對 getter/setter 的格式化并不同，所以建議安裝 vue-devtools 來獲取對檢查數(shù)據(jù)更加友好的用戶界面。
每個(gè)組件實(shí)例都對應(yīng)一個(gè) watcher 實(shí)例，它會在組件渲染的過程中把“接觸”過的數(shù)據(jù)屬性記錄為依賴。之后當(dāng)依賴項(xiàng)的 setter 觸發(fā)時(shí)，會通知 watcher，從而使它關(guān)聯(lián)的組件重新渲染。
檢測變化的注意事項(xiàng)
受現(xiàn)代 JavaScript 的限制 (而且 Object.observe 也已經(jīng)被廢棄)，Vue 無法檢測到對象屬性的添加或刪除。由于 Vue 會在初始化實(shí)例時(shí)對屬性執(zhí)行 getter/setter 轉(zhuǎn)化，所以屬性必須在 data 對象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。例如：
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是響應(yīng)式的
vm.b = 2
// `vm.b` 是非響應(yīng)式的對于已經(jīng)創(chuàng)建的實(shí)例，Vue 不允許動態(tài)添加根級別的響應(yīng)式屬性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套對象添加響應(yīng)式屬性。例如，對于：
Vue.set(vm.someObject, 'b', 2)
您還可以使用 vm.$set 實(shí)例方法，這也是全局 Vue.set 方法的別名：
this.$set(this.someObject,'b',2)
有時(shí)你可能需要為已有對象賦值多個(gè)新屬性，比如使用 Object.assign() 或 _.extend()。但是，這樣添加到對象上的新屬性不會觸發(fā)更新。在這種情況下，你應(yīng)該用原對象與要混合進(jìn)去的對象的屬性一起創(chuàng)建一個(gè)新的對象。
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })也有一些數(shù)組相關(guān)的注意事項(xiàng)，之前已經(jīng)在列表渲染中講過。
聲明響應(yīng)式屬性
由于 Vue 不允許動態(tài)添加根級響應(yīng)式屬性，所以你必須在初始化實(shí)例前聲明所有根級響應(yīng)式屬性，哪怕只是一個(gè)空值：
var vm = new Vue({
data: {
// 聲明 message 為一個(gè)空值字符串
message: ''
},
template: '<div>{{ message }}</div>'
})
// 之后設(shè)置 `message`
vm.message = 'Hello!'如果你未在 data 選項(xiàng)中聲明 message，Vue 將警告你渲染函數(shù)正在試圖訪問不存在的屬性。
這樣的限制在背后是有其技術(shù)原因的，它消除了在依賴項(xiàng)跟蹤系統(tǒng)中的一類邊界情況，也使 Vue 實(shí)例能更好地配合類型檢查系統(tǒng)工作。但與此同時(shí)在代碼可維護(hù)性方面也有一點(diǎn)重要的考慮：data 對象就像組件狀態(tài)的結(jié)構(gòu) (schema)。提前聲明所有的響應(yīng)式屬性，可以讓組件代碼在未來修改或給其他開發(fā)人員閱讀時(shí)更易于理解。
異步更新隊(duì)列
可能你還沒有注意到，Vue 在更新 DOM 時(shí)是異步執(zhí)行的。只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。如果同一個(gè) watcher 被多次觸發(fā)，只會被推入到隊(duì)列中一次。這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對于避免不必要的計(jì)算和 DOM 操作是非常重要的。然后，在下一個(gè)的事件循環(huán)“tick”中，Vue 刷新隊(duì)列并執(zhí)行實(shí)際 (已去重的) 工作。Vue 在內(nèi)部對異步隊(duì)列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate，如果執(zhí)行環(huán)境不支持，則會采用 setTimeout(fn, 0) 代替。
例如，當(dāng)你設(shè)置 vm.someData = 'new value'，該組件不會立即重新渲染。當(dāng)刷新隊(duì)列時(shí)，組件會在下一個(gè)事件循環(huán)“tick”中更新。多數(shù)情況我們不需要關(guān)心這個(gè)過程，但是如果你想基于更新后的 DOM 狀態(tài)來做點(diǎn)什么，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發(fā)人員使用“數(shù)據(jù)驅(qū)動”的方式思考，避免直接接觸 DOM，但是有時(shí)我們必須要這么做。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback)。這樣回調(diào)函數(shù)將在 DOM 更新完成后被調(diào)用。例如：
<div id="example">{{message}}</div>var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改數(shù)據(jù)
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})在組件內(nèi)使用 vm.$nextTick() 實(shí)例方法特別方便，因?yàn)樗恍枰?nbsp;Vue，并且回調(diào)函數(shù)中的 this 將自動綁定到當(dāng)前的 Vue 實(shí)例上：
Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: '未更新'
}
},
methods: {
updateMessage: function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '已更新'
})
}
}
})因?yàn)?$nextTick() 返回一個(gè) Promise 對象，所以你可以使用新的 ES2016 async/await 語法完成相同的事情：
methods: {
updateMessage: async function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
await this.$nextTick()
console.log(this.$el.textContent) // => '已更新'
}
}