Vue.js雙向綁定的實現原理
Vue.js 最核心的功能有兩個，一是響應式的數據綁定系統，二是組件系統。本文僅探究雙向綁定是怎樣實現的。先講涉及的知識點，再用簡化得不能再簡化的代碼實現一個簡單的 hello world 示例。
參考文章：https://segmentfault.com/a/1190000006599500
一、訪問器屬性
訪問器屬性是對象中的一種特殊屬性，它不能直接在對象中設置，而必須通過 defineProperty() 方法單獨定義。
var obj = { };
// 為obj定義一個名為 hello 的訪問器屬性
Object.defineProperty(obj, "hello", {
get: function () {return sth},
set: function (val) {/* do sth */}
})
obj.hello // 可以像普通屬性一樣讀取訪問器屬性
訪問器屬性的"值"比較特殊，讀取或設置訪問器屬性的值，實際上是調用其內部特性：get和set函數。
obj.hello // 讀取屬性，就是調用get函數並返回get函數的返回值
obj.hello = "abc" // 為屬性賦值，就是調用set函數，賦值其實是傳參 
get 和 set 方法內部的 this 都指向 obj，這意味著 get 和 set 函數可以操作對象內部的值。另外，訪問器屬性的會"覆蓋"同名的普通屬性，因為訪問器屬性會被優先訪問，與其同名的普通屬性則會被忽略。
二、極簡雙向綁定的實現
此例實現的效果是：隨文本框輸入文字的變化，span 中會同步顯示相同的文字內容；在js或控制臺顯式的修改 obj.hello 的值，視圖會相應更新。這樣就實現了 model => view 以及 view => model 的雙向綁定。
以上就是 Vue 實現雙向綁定的基本原理。
三、分解任務
上述示例僅僅是為了說明原理。我們最終要實現的是：
首先將該任務分成幾個子任務：
1、輸入框以及文本節點與 data 中的數據綁定
2、輸入框內容變化時，data 中的數據同步變化。即 view => model 的變化。
3、data 中的數據變化時，文本節點的內容同步變化。即 model => view 的變化。
要實現任務一，需要對 DOM 進行編譯，這裏有一個知識點：DocumentFragment。
四、DocumentFragment
DocumentFragment（文檔片段）可以看作節點容器，它可以包含多個子節點，當我們將它插入到 DOM 中時，只有它的子節點會插入目標節點，所以把它看作一組節點的容器。使用 DocumentFragment 處理節點，速度和性能遠遠優於直接操作 DOM。Vue 進行編譯時，就是將掛載目標的所有子節點劫持（真的是劫持，通過 append 方法，DOM 中的節點會被自動刪除）到 DocumentFragment 中，經過一番處理後，再將 DocumentFragment 整體返回插入掛載目標。
# 勘誤：flag.append() 應為 flag.appendChild()。下同。在 Chrome 中用 append() 竟然正常，沒報錯。
五、數據初始化綁定
以上代碼實現了任務一，我們可以看到，hello world已經呈現在輸入框和文本節點中。
六、響應式的數據綁定
再來看任務二的實現思路：當我們在輸入框輸入數據的時候，首先觸發 input 事件（或者 keyup、change 事件），在相應的事件處理程序中，我們獲取輸入框的 value 並賦值給 vm 實例的 text 屬性。我們會利用 defineProperty 將 data 中的 text 設置為 vm 的訪問器屬性，因此給 vm.text 賦值，就會觸發 set 方法。在 set 方法中主要做兩件事，第一是更新屬性的值，第二留到任務三再說。
任務二也就完成了，text 屬性值會與輸入框的內容同步變化：
七、訂閱/發布模式（subscribe&publish）
text 屬性變化了，set 方法觸發了，但是文本節點的內容沒有變化。如何讓同樣綁定到 text 的文本節點也同步變化呢？這裏又有一個知識點：訂閱發布模式。
訂閱發布模式（又稱觀察者模式）定義了一種一對多的關系，讓多個觀察者同時監聽某一個主題對象，這個主題對象的狀態發生改變時就會通知所有觀察者對象。
發布者發出通知 => 主題對象收到通知並推送給訂閱者 => 訂閱者執行相應操作
之前提到的，當 set 方法觸發後做的第二件事就是作為發布者發出通知：“我是屬性 text，我變了”。文本節點則是作為訂閱者，在收到消息後執行相應的更新操作。
八、雙向綁定的實現
回顧一下，每當 new 一個 Vue，主要做了兩件事：第一個是監聽數據：observe(data)，第二個是編譯 HTML：nodeToFragement(id)。
在監聽數據的過程中，會為 data 中的每一個屬性生成一個主題對象 dep。
在編譯 HTML 的過程中，會為每個與數據綁定相關的節點生成一個訂閱者 watcher，watcher 會將自己添加到相應屬性的 dep 中。
我們已經實現：修改輸入框內容 => 在事件回調函數中修改屬性值 => 觸發屬性的 set 方法。
接下來我們要實現的是：發出通知 dep.notify() => 觸發訂閱者的 update 方法 => 更新視圖。
這裏的關鍵邏輯是：如何將 watcher 添加到關聯屬性的 dep 中。
在編譯 HTML 過程中，為每個與 data 關聯的節點生成一個 Watcher。Watcher 函數中發生了什麽呢？
首先，將自己賦給了一個全局變量 Dep.target；
其次，執行了 update 方法，進而執行了 get 方法，get 的方法讀取了 vm 的訪問器屬性，從而觸發了訪問器屬性的 get 方法，get 方法中將該 watcher 添加到了對應訪問器屬性的 dep 中；
再次，獲取屬性的值，然後更新視圖。
最後，將 Dep.target 設為空。因為它是全局變量，也是 watcher 與 dep 關聯的唯一橋梁，任何時刻都必須保證 Dep.target 只有一個值。
至此，hello world 雙向綁定就基本實現了。文本內容會隨輸入框內容同步變化，在控制器中修改 vm.text 的值，會同步反映到文本內容中。
完整代碼：https://github.com/bison1994/two-way-data-binding
更詳盡的源碼分析，可以參考滴滴的這篇文章：https://github.com/DDFE/DDFE-blog/issues/7
Vue.js雙向綁定的實現原理