vue雙向綁定&虛擬DOM總結

雙向綁定方法

• 發佈者-訂閱者模式（backbone.js）
• 髒值檢查（angular.js）
• 數據劫持（vue.js）

數據劫持

vue.js 則是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。
參考連接: 剖析Vue原理&實現雙向綁定MVVM

Vue 響應系統，其核心有三點：observe、watcher、dep：

observe：遍歷 data 中的屬性，使用 Object.defineProperty 的 get/set 方法對其進行數據劫持；
dep：每一個屬性擁有本身的消息訂閱器 dep，用於存放全部訂閱了該屬性的觀察者對象；
watcher：觀察者（對象），經過 dep 實現對響應屬性的監聽，監聽到結果後，主動觸發本身的回調進行響應。

1.須要 Observe 的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter 和 getter。這樣的話，給這個對象的某個值賦值，就會觸發 setter，那麼就能監聽到了數據變化。
2.Compile 解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新數據。
3.Watcher 訂閱者是 Observer 和 Compile 之間通訊的橋樑，主要作的事情有：

在自身實例化時往屬性訂閱器（dep）裏面添加本身。
自身必須有一個 update() 方法
待屬性變更 dep.notice() 通知時，能調用自身的 update() 方法，並觸發 Compile 中綁定的回調，則功成身退。

4.MVVM 做爲數據綁定的入口，整合 Observer、Compile 和 Watcher 三者，經過 Observer 來監聽本身的 model 數據變化，經過 Compile 來解析編譯模板指令，最終利用 Watcher 搭起 Observer 和 Compile 之間的橋樑，達到數據變化 -> 視圖更新；視圖交互變化（input） -> 數據 model 變動的雙向綁定效果。

vDom

實現虛擬DOM包含如下三個步驟：

• 用JS對象模擬DOM樹
• 比較兩棵虛擬DOM樹的差別, Diff算法
• 映射成真實DOM

參考連接：
虛擬DOM介紹
vue核心之虛擬DOM(vdom)