關于雙向數據綁定
當我們在前端開發中采用MV*的模式時，M – model，指的是模型，也就是數據，V – view，指的是視圖，也就是頁面展現的部分。通常，我們需要編寫代碼，將從服務器獲取的數據進行“渲染”，展現到視圖上。每當數據有變更時，我們會再次進行渲染，從而更新視圖，使得視圖與數據保持一致。也就是：
而另一方面，頁面也會通過用戶的交互，產生狀態、數據的變化，這個時候，我們則編寫代碼，將視圖對數據的更新同步到數據，以致于同步到后臺服務器。也就是：
不同的前端 MV* 框架對于這種 Model 和 View 間的數據同步有不同的處理。在 Backbone 中，Model 到 View 的數據傳遞，可以在 View 中監聽 Model 的 change 事件，每當 Model 更新，View 中重新執行 render。而 View 到 Model 的數據傳遞，可以監聽 View 對應的 DOM 元素的各種事件，在檢測到 View 狀態變更后，將變更的數據發送到 Model。相較于 Backbone，AngularJS所代表的 MVVM 框架則更進一步，從框架層面支持這種數據同步機制，而且是雙向數據綁定：
不過在不同的 MVVM 框架中，實現雙向數據綁定的技術有所不同。
AngularJS 采用“臟值檢測”的方式，數據發生變更后，對于所有的數據和視圖的綁定關系進行一次檢測，識別是否有數據發生了改變，有變化進行處理，可能進一步引發其他數據的改變，所以這個過程可能會循環幾次，一直到不再有數據變化發生后，將變更的數據發送到視圖，更新頁面展現。如果是手動對 ViewModel 的數據進行變更，為確保變更同步到視圖，需要手動觸發一次“臟值檢測”。
VueJS 則使用 ES5 提供的 Object.defineProperty() 方法，監控對數據的操作，從而可以自動觸發數據同步。并且，由于是在不同的數據上觸發同步，可以精確的將變更發送給綁定的視圖，而不是對所有的數據都執行一次檢測。
參考：
What is two way binding?（http://stackoverflow.com/questions/13504906/what-is-two-way-binding）
Angular沉思錄（一）數據綁定（https://github.com/xufei/blog/issues/10）
數據與視圖的綁定與同步，最終體現在對數據的讀寫處理過程中，也就是 Object.defineProperty() 定義的數據 set、get 函數中。Vue 中對于的函數為 defineReactive，在精簡版實現中，我只保留了一些基本特性：
functiondefineReactive(obj,key,value){
vardep=newDep()
Object.defineProperty(obj,key,{
enumerable:true,
configurable:true,
get:functionreactiveGetter(){
if(Dep.target){
dep.depend()
}
returnvalue
},
set:functionreactiveSetter(newVal){
if(value===newVal){
return
}else{
value=newVal
dep.notify()
}
}
})
}
在對數據進行讀取時，如果當前有 Watcher（對數據的觀察者吧，watcher 會負責將獲取的新數據發送給視圖），那將該 Watcher 綁定到當前的數據上（dep.depend()，dep 關聯當前數據和所有的 watcher 的依賴關系），是一個檢查并記錄依賴的過程。而在對數據進行賦值時，如果數據發生改變，則通知所有的 watcher（借助 dep.notify()）。這樣，即便是我們手動改變了數據，框架也能夠自動將數據同步到視圖。
數據綁定關系的識別過程
Vue 和 AngularJS 中，都是通過在 HTML 中添加指令的方式，將視圖元素與數據的綁定關系進行聲明。例如：
以上的 HTML 代碼表示該 input 元素與 name 數據進行綁定。在 JS 代碼中可以這樣進行初始化：
varvm=newVue({
el:'#test',
data:{
name:'luobo'
}
})
代碼正確執行后，頁面上 input 元素對應的位置會顯示上面代碼中給出的初始值：luobo。
由于雙向數據綁定已經建立，因此：
執行vm.name = 'mickey'后，頁面上 input 也會更新為顯示： mickey
在頁面文本框中修改內容為：tang，則通過vm.name獲取的值為："tang"
那么初始化的過程中，Vue 是如何識別出這種綁定關系的呢？
通過分析源碼，在初始化過程中（new Vue() 執行時），主要執行兩個步驟：
compile
link
compile 過程中，對于給定的目標元素進行解析，識別出所有綁定在元素（通過 el 屬性傳入）上的指令。
link 過程中，建立這些指令與對應數據（通過 data 屬性傳入初始值）的綁定關系，并以數據的初始值進行渲染。綁定關系建立后，就可以雙向同步數據了。
除了基本的雙向數據綁定，Vue 還提供了更多的特性和功能，如果只是對雙向數據綁定感興趣，可以看下我的精簡版實現：
https://github.com/luobotang/simply-vue
基本是從 Vue 代碼中精簡、改造得到的，主要保留了 Vue 中與雙向數據綁定有關的部分（包括 compile、link 相關代碼），指令只保留了 input[type=”text”] 和普通文本兩種類型，用于演示數據綁定的效果。
