關於雙向資料繫結
當我們在前端開發中採用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() 方法，監控對資料的操作，從而可以自動觸發資料同步。並且，由於是在不同的資料上觸發同步，可以精確的將變更傳送給繫結的檢視，而不是對所有的資料都執行一次檢測。
參考：
Vue 雙向資料繫結實現
資料與檢視的繫結與同步，最終體現在對資料的讀寫處理過程中，也就是 Object.defineProperty() 定義的資料 set、get 函式中。Vue 中對於的函式為 defineReactive，在精簡版實現中，我只保留了一些基本特性：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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() } } }) } |
在對資料進行讀取時，如果當前有 Watcher（對資料的觀察者吧，watcher 會負責將獲取的新資料傳送給檢視），那將該 Watcher 繫結到當前的資料上（dep.depend()，dep 關聯當前資料和所有的 watcher 的依賴關係），是一個檢查並記錄依賴的過程。而在對資料進行賦值時，如果資料發生改變，則通知所有的 watcher（藉助 dep.notify()）。這樣，即便是我們手動改變了資料，框架也能夠自動將資料同步到檢視。
資料繫結關係的識別過程
Vue 和 AngularJS 中，都是通過在 HTML 中新增指令的方式，將檢視元素與資料的繫結關係進行宣告。例如：
|
1 2 3 |
<form id="test"> <input type="text" v-model="name"> </form> |
以上的 HTML 程式碼表示該 input 元素與 name 資料進行繫結。在 JS 程式碼中可以這樣進行初始化：
|
1 2 3 4 5 6 |
var vm = new Vue({ 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”] 和普通文字兩種型別，用於演示資料繫結的效果。
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
