摘要：關(guān)于雙向數(shù)據(jù)綁定當(dāng)我們?cè)谇岸碎_發(fā)中采用的模式時(shí)，，指的是模型，也就是數(shù)據(jù)，，指的是視圖，也就是頁(yè)面展現(xiàn)的部分。參考沉思錄一數(shù)據(jù)綁定雙向數(shù)據(jù)綁定實(shí)現(xiàn)數(shù)據(jù)與視圖的綁定與同步，最終體現(xiàn)在對(duì)數(shù)據(jù)的讀寫處理過程中，也就是定義的數(shù)據(jù)函數(shù)中。

當(dāng)我們?cè)谇岸碎_發(fā)中采用MV*的模式時(shí)，M - model，指的是模型，也就是數(shù)據(jù)，V - view，指的是視圖，也就是頁(yè)面展現(xiàn)的部分。通常，我們需要編寫代碼，將從服務(wù)器獲取的數(shù)據(jù)進(jìn)行“渲染”，展現(xiàn)到視圖上。每當(dāng)數(shù)據(jù)有變更時(shí)，我們會(huì)再次進(jìn)行渲染，從而更新視圖，使得視圖與數(shù)據(jù)保持一致。也就是：

而另一方面，頁(yè)面也會(huì)通過用戶的交互，產(chǎn)生狀態(tài)、數(shù)據(jù)的變化，這個(gè)時(shí)候，我們則編寫代碼，將視圖對(duì)數(shù)據(jù)的更新同步到數(shù)據(jù)，以致于同步到后臺(tái)服務(wù)器。也就是：

不同的前端 MV* 框架對(duì)于這種 Model 和 View 間的數(shù)據(jù)同步有不同的處理。在 Backbone 中，Model 到 View 的數(shù)據(jù)傳遞，可以在 View 中監(jiān)聽 Model 的 change 事件，每當(dāng) Model 更新，View 中重新執(zhí)行 render。而 View 到 Model 的數(shù)據(jù)傳遞，可以監(jiān)聽 View 對(duì)應(yīng)的 DOM 元素的各種事件，在檢測(cè)到 View 狀態(tài)變更后，將變更的數(shù)據(jù)發(fā)送到 Model。相較于 Backbone，AngularJS 所代表的 MVVM 框架則更進(jìn)一步，從框架層面支持這種數(shù)據(jù)同步機(jī)制，而且是雙向數(shù)據(jù)綁定：

不過在不同的 MVVM 框架中，實(shí)現(xiàn)雙向數(shù)據(jù)綁定的技術(shù)有所不同。

AngularJS 采用“臟值檢測(cè)”的方式，數(shù)據(jù)發(fā)生變更后，對(duì)于所有的數(shù)據(jù)和視圖的綁定關(guān)系進(jìn)行一次檢測(cè)，識(shí)別是否有數(shù)據(jù)發(fā)生了改變，有變化進(jìn)行處理，可能進(jìn)一步引發(fā)其他數(shù)據(jù)的改變，所以這個(gè)過程可能會(huì)循環(huán)幾次，一直到不再有數(shù)據(jù)變化發(fā)生后，將變更的數(shù)據(jù)發(fā)送到視圖，更新頁(yè)面展現(xiàn)。如果是手動(dòng)對(duì) ViewModel 的數(shù)據(jù)進(jìn)行變更，為確保變更同步到視圖，需要手動(dòng)觸發(fā)一次“臟值檢測(cè)”。

VueJS 則使用 ES5 提供的 Object.defineProperty() 方法，監(jiān)控對(duì)數(shù)據(jù)的操作，從而可以自動(dòng)觸發(fā)數(shù)據(jù)同步。并且，由于是在不同的數(shù)據(jù)上觸發(fā)同步，可以精確的將變更發(fā)送給綁定的視圖，而不是對(duì)所有的數(shù)據(jù)都執(zhí)行一次檢測(cè)。

參考：

What is two way binding?

Angular沉思錄（一）數(shù)據(jù)綁定

數(shù)據(jù)與視圖的綁定與同步，最終體現(xiàn)在對(duì)數(shù)據(jù)的讀寫處理過程中，也就是 Object.defineProperty() 定義的數(shù)據(jù) set、get 函數(shù)中。Vue 中對(duì)于的函數(shù)為 defineReactive，在精簡(jiǎn)版實(shí)現(xiàn)中，我只保留了一些基本特性：

function defineReactive(obj, key, value) {
    var dep = new Dep()
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter() {
            if (Dep.target) {
                dep.depend()
            }
            return value
        },
        set: function reactiveSetter(newVal) {
            if (value === newVal) {
                return
            } else {
                value = newVal
                dep.notify()
            }
        }
    })
}

在對(duì)數(shù)據(jù)進(jìn)行讀取時(shí)，如果當(dāng)前有 Watcher（對(duì)數(shù)據(jù)的觀察者吧，watcher 會(huì)負(fù)責(zé)將獲取的新數(shù)據(jù)發(fā)送給視圖），那將該 Watcher 綁定到當(dāng)前的數(shù)據(jù)上（dep.depend()，dep 關(guān)聯(lián)當(dāng)前數(shù)據(jù)和所有的 watcher 的依賴關(guān)系），是一個(gè)檢查并記錄依賴的過程。而在對(duì)數(shù)據(jù)進(jìn)行賦值時(shí)，如果數(shù)據(jù)發(fā)生改變，則通知所有的 watcher（借助 dep.notify()）。這樣，即便是我們手動(dòng)改變了數(shù)據(jù)，框架也能夠自動(dòng)將數(shù)據(jù)同步到視圖。

Vue 和 AngularJS 中，都是通過在 HTML 中添加指令的方式，將視圖元素與數(shù)據(jù)的綁定關(guān)系進(jìn)行聲明。例如：

以上的 HTML 代碼表示該 input 元素與 name 數(shù)據(jù)進(jìn)行綁定。在 JS 代碼中可以這樣進(jìn)行初始化：

var vm = new Vue({
  el: "#test",
  data: {
    name: "luobo"
  }
})

代碼正確執(zhí)行后，頁(yè)面上 input 元素對(duì)應(yīng)的位置會(huì)顯示上面代碼中給出的初始值：luobo。

由于雙向數(shù)據(jù)綁定已經(jīng)建立，因此：

執(zhí)行 vm.name = "mickey" 后，頁(yè)面上 input 也會(huì)更新為顯示： mickey

在頁(yè)面文本框中修改內(nèi)容為：tang，則通過vm.name 獲取的值為："tang"

那么初始化的過程中，Vue 是如何識(shí)別出這種綁定關(guān)系的呢？

通過分析源碼，在初始化過程中（new Vue() 執(zhí)行時(shí)），主要執(zhí)行兩個(gè)步驟：

compile

link

compile 過程中，對(duì)于給定的目標(biāo)元素進(jìn)行解析，識(shí)別出所有綁定在元素（通過 el 屬性傳入）上的指令。
link 過程中，建立這些指令與對(duì)應(yīng)數(shù)據(jù)（通過 data 屬性傳入初始值）的綁定關(guān)系，并以數(shù)據(jù)的初始值進(jìn)行渲染。綁定關(guān)系建立后，就可以雙向同步數(shù)據(jù)了。

除了基本的雙向數(shù)據(jù)綁定，Vue 還提供了更多的特性和功能，如果只是對(duì)雙向數(shù)據(jù)綁定感興趣，可以看下我的精簡(jiǎn)版實(shí)現(xiàn)：
https://github.com/luobotang/...
基本是從 Vue 代碼中精簡(jiǎn)、改造得到的，主要保留了 Vue 中與雙向數(shù)據(jù)綁定有關(guān)的部分（包括 compile、link 相關(guān)代碼），指令只保留了 input[type="text"] 和普通文本兩種類型，用于演示數(shù)據(jù)綁定的效果。