Vue.js資料雙向繫結的實現原理
Vue.js 最核心的功能有兩個，一是響應式的資料繫結系統，二是元件系統。本文僅探究雙向繫結是怎樣實現的。
一、訪問器屬性
訪問器屬性是物件中的一種特殊屬性，它不能直接在物件中設定，而必須通過 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 的雙向繫結。
三、分解任務
上述示例僅僅是為了說明原理。我們最終要實現的是：
首先將該任務分成幾個子任務：
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 方法中主要做兩件事，第一是更新屬性的值，第二留到任務三再說。
七、訂閱/釋出模式（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 中。
首先，將自己賦給了一個全域性變數 Dep.target；
其次，執行了 update 方法，進而執行了 get 方法，get 的方法讀取了 vm 的訪問器屬性，從而觸發了訪問器屬性的 get 方法，get 方法中將該 watcher 新增到了對應訪問器屬性的 dep 中；
再次，獲取屬性的值，然後更新檢視。
最後，將 Dep.target 設為空。因為它是全域性變數，也是 watcher 與 dep 關聯的唯一橋樑，任何時刻都必須保證 Dep.target 只有一個值。
至此，hello world 雙向繫結就基本實現了。文字內容會隨輸入框內容同步變化，在控制器中修改 vm.text 的值，會同步反映到文字內容中。
完整程式碼：https://github.com/OwnBlueSky/Dawn
最後，感謝您的閱讀。