Vue.2.0.5-深入響應式原理

大部分的基礎內容我們已經講到了，現在講點底層內容。Vue 最顯著的一個功能是響應系統 —— 模型只是普通對象，修改它則更新視圖。這會讓狀態管理變得非常簡單且直觀，不過理解它的原理以避免一些常見的陷阱也是很重要的。在本節中，我們將開始深挖 Vue 響應系統的底層細節。

如何追蹤變化

把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉為 getter/setter。這是 ES5 的特性，不能打補丁實現，這便是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的原因。

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

每個組件實例都有相應的 watcher 程序實例，它會在組件渲染的過程中把屬性記錄為依賴，之后當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。

變化檢測問題

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

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

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

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

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

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

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

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

也有一些數組相關的問題，之前已經在列表渲染中講過。

由於 Vue 不允許動態添加根級響應式屬性，所以你必須在初始化實例前聲明根級響應式屬性，哪怕只是一個空值:

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

如果你不在 data 對象中聲明 message，Vue 將發出警告表明你的渲染方法正試圖訪問一個不存在的屬性。

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

異步更新隊列

你應該注意到 Vue 執行 DOM 更新是異步的，只要觀察到數據變化，Vue 就開始一個隊列，將同一事件循環內所有的數據變化緩存起來。如果一個 watcher 被多次觸發，只會推入一次到隊列中。然后，在接下來的事件循環中，Vue 刷新隊列並僅執行必要的 DOM 更新。Vue 在內部嘗試利用原生的 Promise.then 和 MutationObserver 來調用異步隊列，如果執行環境不兼容，會采用 setTimeout(fn, 0) 代替。

例如，當你設置 vm.someData = 'new value' ，該組件不會馬上被重新渲染。當刷新隊列時，這個組件會在下一次事件循環清空隊列時更新。我們基本不用關心這個過程，但是如果你想在 DOM 狀態更新后做點什么，這就可能會有些棘手。一般來講， Vue 鼓勵開發者沿着數據驅動的思路，盡量避免直接接觸 DOM，但是有時我們確實要這么做。為了在數據變化之后等待 Vue 完成更新 DOM ，可以在數據變化之后立即使用Vue.nextTick(callback) 。這樣回調在 DOM 更新完成后就會調用。例如：

<div id="example">{{message}}</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改數據
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

vm.$nextTick() 這個實例方法在組件內使用特別方便，因為它不需要全局 Vue ，它的回調 this 將自動綁定到當前的 Vue 實例上：

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'
      })
    }
  }
})