Vue.js 2.0 深入響應(yīng)式原理

大部分的基礎(chǔ)內(nèi)容我們已經(jīng)講到了，現(xiàn)在講點(diǎn)底層內(nèi)容。Vue 最顯著的一個(gè)功能是響應(yīng)系統(tǒng) —— 模型只是普通對(duì)象，修改它則更新視圖。這會(huì)讓狀態(tài)管理變得非常簡(jiǎn)單且直觀，不過(guò)理解它的原理以避免一些常見(jiàn)的陷阱也是很重要的。在本節(jié)中，我們將開(kāi)始深挖 Vue 響應(yīng)系統(tǒng)的底層細(xì)節(jié)。

如何追蹤變化

把一個(gè)普通 Javascript 對(duì)象傳給 Vue 實(shí)例來(lái)作為它的 data 選項(xiàng)，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter。這是 ES5 的特性，不能打補(bǔ)丁實(shí)現(xiàn)，這便是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的原因。

用戶看不到 getter/setters，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問(wèn)和修改時(shí)通知變化。這里需要注意的問(wèn)題是瀏覽器控制臺(tái)在打印數(shù)據(jù)對(duì)象時(shí) getter/setter 的格式化并不同，所以你可能需要安裝 vue-devtools 來(lái)獲取更加友好的檢查接口。

每個(gè)組件實(shí)例都有相應(yīng)的 watcher 程序?qū)嵗?，它?huì)在組件渲染的過(guò)程中把屬性記錄為依賴，之后當(dāng)依賴項(xiàng)的 setter 被調(diào)用時(shí)，會(huì)通知 watcher 重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。

變化檢測(cè)問(wèn)題

受現(xiàn)代 Javascript 的限制(以及 Object.observe 的廢棄)，Vue 不能檢測(cè)到對(duì)象屬性的添加或刪除。因?yàn)?Vue 在初始化實(shí)例時(shí)將屬性轉(zhuǎn)為 getter/setter，所以屬性必須在 data 對(duì)象上才能讓 Vue 轉(zhuǎn)換它，這樣才能讓它是響應(yīng)的。例如：

var vm = new Vue({
  data:{
  a:1
  }
})
// `vm.a` 是響應(yīng)的
vm.b = 2
// `vm.b` 是非響應(yīng)的

Vue 不允許在已經(jīng)創(chuàng)建的實(shí)例上動(dòng)態(tài)添加新的根級(jí)響應(yīng)式屬性（root-level reactive properties）。然而它可以使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對(duì)象上：

Vue.set(vm.someObject, 'b', 2)

您還可以使用 vm.$set 實(shí)例方法，這也是全局 Vue.set 方法的別名：

this.$set(this.someObject,'b',2)

有時(shí)你想向已有對(duì)象上添加一些屬性，例如使用 Object.assign() 或 _.extend() 方法來(lái)添加屬性。但是，添加到對(duì)象上的新屬性不會(huì)觸發(fā)更新。在這種情況下可以創(chuàng)建一個(gè)新的對(duì)象，讓它包含原對(duì)象的屬性和新的屬性：

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

也有一些數(shù)組相關(guān)的問(wèn)題，之前已經(jīng)在列表渲染中講過(guò)。

由于 Vue 不允許動(dòng)態(tài)添加根級(jí)響應(yīng)式屬性，所以你必須在初始化實(shí)例前聲明根級(jí)響應(yīng)式屬性，哪怕只是一個(gè)空值:

var vm = new Vue({
  data: {
    // 聲明 message 為一個(gè)空值字符串
    message: ''
  },
  template: '<div>{{ message }}</div>'
})
// 之后設(shè)置 `message` 
vm.message = 'Hello!'

如果你不在 data 對(duì)象中聲明 message，Vue 將發(fā)出警告表明你的渲染方法正試圖訪問(wèn)一個(gè)不存在的屬性。

這樣的限制在背后是有其技術(shù)原因的，在依賴項(xiàng)跟蹤系統(tǒng)中，它消除了一類邊界情況，也使 Vue 實(shí)例在類型檢查系統(tǒng)的幫助下運(yùn)行的更高效。在代碼可維護(hù)性方面上這也是重要的一點(diǎn)：data 對(duì)象就像組件狀態(tài)的模式（Schema），在它上面聲明所有的屬性讓組織代碼更易于被其他開(kāi)發(fā)者或是自己回頭重新閱讀時(shí)更加快速地理解。

異步更新隊(duì)列

你應(yīng)該注意到 Vue 執(zhí)行 DOM 更新是異步的，只要觀察到數(shù)據(jù)變化，Vue 就開(kāi)始一個(gè)隊(duì)列，將同一事件循環(huán)內(nèi)所有的數(shù)據(jù)變化緩存起來(lái)。如果一個(gè) watcher 被多次觸發(fā)，只會(huì)推入一次到隊(duì)列中。然后，在接下來(lái)的事件循環(huán)中，Vue 刷新隊(duì)列并僅執(zhí)行必要的 DOM 更新。Vue 在內(nèi)部嘗試?yán)迷?nbsp;Promise.then 和 MutationObserver 來(lái)調(diào)用異步隊(duì)列，如果執(zhí)行環(huán)境不兼容，會(huì)采用 setTimeout(fn, 0) 代替。

例如，當(dāng)你設(shè)置 vm.someData = 'new value' ，該組件不會(huì)馬上被重新渲染。當(dāng)刷新隊(duì)列時(shí)，這個(gè)組件會(huì)在下一次事件循環(huán)清空隊(duì)列時(shí)更新。我們基本不用關(guān)心這個(gè)過(guò)程，但是如果你想在 DOM 狀態(tài)更新后做點(diǎn)什么，這就可能會(huì)有些棘手。一般來(lái)講， Vue 鼓勵(lì)開(kāi)發(fā)者沿著數(shù)據(jù)驅(qū)動(dòng)的思路，盡量避免直接接觸 DOM，但是有時(shí)我們確實(shí)要這么做。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback) 。這樣回調(diào)在 DOM 更新完成后就會(huì)調(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
})

vm.$nextTick() 這個(gè)實(shí)例方法在組件內(nèi)使用特別方便，因?yàn)樗恍枰?nbsp;Vue ，它的回調(diào) this 將自動(dòng)綁定到當(dāng)前的 Vue 實(shí)例上：

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: 'not updated'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = 'updated'
      console.log(this.$el.textContent) // => 'not updated'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => 'updated'
      })
    }
  }
})