深入響應式原理

大部分的基礎內容我們已經講到了，現在講點底層內容。Vue.js 最顯著的一個功能是響應系統 —— 模型只是普通物件，修改它則更新檢視。這讓狀態管理非常簡單且直觀，不過理解它的原理也很重要，可以避免一些常見問題。

我們可以通過一張圖來看一下，如下圖所示：

圖中的模型（Model）就是 data 方法返回的{times:1}，檢視（View）是最終在瀏覽器中顯示的DOM。模型通過Observer、Dep、Watcher、Directive等一系列物件的關聯，最終和檢視建立起關係。歸納起來，Vue.js在這裡主要做了三件事：

• 通過 Observer 對 data 做監聽，並且提供了訂閱某個資料項變化的能力。
• 把 template 編譯成一段 document fragment，然後解析其中的 Directive，得到每一個 Directive 所依賴的資料項和update方法。
• 通過Watcher把上述兩部分結合起來，即把Directive中的資料依賴通過Watcher訂閱在對應資料的 Observer 的 Dep 上。當資料變化時，就會觸發 Observer 的 Dep 上的 notify 方法通知對應的 Watcher 的 update，進而觸發 Directive 的 update 方法來更新 DOM 檢視，最後達到模型和檢視關聯起來。