資訊專欄INFORMATION COLUMN
摘要：關于雙向數據綁定當我們在前端開發(fā)中采用的模式時，，指的是模型，也就是數據，，指的是視圖，也就是頁面展現的部分。參考沉思錄一數據綁定雙向數據綁定實現數據與視圖的綁定與同步，最終體現在對數據的讀寫處理過程中，也就是定義的數據函數中。
關于雙向數據綁定
當我們在前端開發(fā)中采用MV*的模式時，M - model，指的是模型，也就是數據，V - view，指的是視圖，也就是頁面展現的部分。通常，我們需要編寫代碼，將從服務器獲取的數據進行“渲染”，展現到視圖上。每當數據有變更時，我們會再次進行渲染，從而更新視圖，使得視圖與數據保持一致。也就是：
而另一方面，頁面也會通過用戶的交互，產生狀態(tài)、數據的變化，這個時候，我們則編寫代碼，將視圖對數據的更新同步到數據，以致于同步到后臺服務器。也就是：
不同的前端 MV* 框架對于這種 Model 和 View 間的數據同步有不同的處理。在 Backbone 中，Model 到 View 的數據傳遞，可以在 View 中監(jiān)聽 Model 的 change 事件，每當 Model 更新，View 中重新執(zhí)行 render。而 View 到 Model 的數據傳遞，可以監(jiān)聽 View 對應的 DOM 元素的各種事件，在檢測到 View 狀態(tài)變更后，將變更的數據發(fā)送到 Model。相較于 Backbone，AngularJS 所代表的 MVVM 框架則更進一步，從框架層面支持這種數據同步機制，而且是雙向數據綁定：
不過在不同的 MVVM 框架中，實現雙向數據綁定的技術有所不同。
AngularJS 采用“臟值檢測”的方式，數據發(fā)生變更后，對于所有的數據和視圖的綁定關系進行一次檢測，識別是否有數據發(fā)生了改變，有變化進行處理，可能進一步引發(fā)其他數據的改變，所以這個過程可能會循環(huán)幾次，一直到不再有數據變化發(fā)生后，將變更的數據發(fā)送到視圖，更新頁面展現。如果是手動對 ViewModel 的數據進行變更，為確保變更同步到視圖，需要手動觸發(fā)一次“臟值檢測”。
VueJS 則使用 ES5 提供的 Object.defineProperty() 方法，監(jiān)控對數據的操作，從而可以自動觸發(fā)數據同步。并且，由于是在不同的數據上觸發(fā)同步，可以精確的將變更發(fā)送給綁定的視圖，而不是對所有的數據都執(zhí)行一次檢測。
參考：
What is two way binding?
Angular沉思錄（一）數據綁定
Vue 雙向數據綁定實現數據與視圖的綁定與同步，最終體現在對數據的讀寫處理過程中，也就是 Object.defineProperty() 定義的數據 set、get 函數中。Vue 中對于的函數為 defineReactive，在精簡版實現中，我只保留了一些基本特性：
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 會負責將獲取的新數據發(fā)送給視圖），那將該 Watcher 綁定到當前的數據上（dep.depend()，dep 關聯當前數據和所有的 watcher 的依賴關系），是一個檢查并記錄依賴的過程。而在對數據進行賦值時，如果數據發(fā)生改變，則通知所有的 watcher（借助 dep.notify()）。這樣，即便是我們手動改變了數據，框架也能夠自動將數據同步到視圖。
數據綁定關系的識別過程Vue 和 AngularJS 中，都是通過在 HTML 中添加指令的方式，將視圖元素與數據的綁定關系進行聲明。例如：
以上的 HTML 代碼表示該 input 元素與 name 數據進行綁定。在 JS 代碼中可以這樣進行初始化：
var vm = new Vue({
el: "#test",
data: {
name: "luobo"
}
})
代碼正確執(zhí)行后，頁面上 input 元素對應的位置會顯示上面代碼中給出的初始值：luobo。
由于雙向數據綁定已經建立，因此：
執(zhí)行 vm.name = "mickey" 后，頁面上 input 也會更新為顯示： mickey
在頁面文本框中修改內容為：tang，則通過vm.name 獲取的值為："tang"
那么初始化的過程中，Vue 是如何識別出這種綁定關系的呢？
通過分析源碼，在初始化過程中（new Vue() 執(zhí)行時），主要執(zhí)行兩個步驟：
compile
link
compile 過程中，對于給定的目標元素進行解析，識別出所有綁定在元素（通過 el 屬性傳入）上的指令。
link 過程中，建立這些指令與對應數據（通過 data 屬性傳入初始值）的綁定關系，并以數據的初始值進行渲染。綁定關系建立后，就可以雙向同步數據了。
除了基本的雙向數據綁定，Vue 還提供了更多的特性和功能，如果只是對雙向數據綁定感興趣，可以看下我的精簡版實現：
https://github.com/luobotang/...
基本是從 Vue 代碼中精簡、改造得到的，主要保留了 Vue 中與雙向數據綁定有關的部分（包括 compile、link 相關代碼），指令只保留了 input[type="text"] 和普通文本兩種類型，用于演示數據綁定的效果。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/91256.html
摘要：儲存訂閱器因為屬性被監(jiān)聽，這一步會執(zhí)行監(jiān)聽器里的方法這一步我們把也給弄了出來，到這一步我們已經實現了一個簡單的雙向綁定了，我們可以嘗試把兩者結合起來看下效果?？偨Y本文主要是對雙向綁定原理的學習與實現。 當今前端天下以 Angular、React、vue 三足鼎立的局面，你不選擇一個陣營基本上無法立足于前端，甚至是兩個或者三個陣營都要選擇，大勢所趨。 所以我們要時刻保持好奇心，擁抱變化，...
摘要：無論是還是都提倡單向數據流管理狀態(tài)，那我們今天要談的雙向綁定是否和單向數據流理念有所違背我覺得不是，從上篇文章語法樹轉函數了解到，雙向綁定，實質是的單向綁定和事件偵聽的語法糖。源碼解析今天涉及到的代碼全在文件夾下。 通過對 Vue2.0 源碼閱讀，想寫一寫自己的理解，能力有限故從尤大佬2016.4.11第一次提交開始讀，準備陸續(xù)寫： 模版字符串轉AST語法樹 AST語法樹轉rend...
摘要：無論是還是都提倡單向數據流管理狀態(tài)，那我們今天要談的雙向綁定是否和單向數據流理念有所違背我覺得不是，從上篇文章語法樹轉函數了解到，雙向綁定，實質是的單向綁定和事件偵聽的語法糖。源碼解析今天涉及到的代碼全在文件夾下。 通過對 Vue2.0 源碼閱讀，想寫一寫自己的理解，能力有限故從尤大佬2016.4.11第一次提交開始讀，準備陸續(xù)寫： 模版字符串轉AST語法樹 AST語法樹轉rend...
摘要：當我們的視圖和數據任何一方發(fā)生變化的時候，我們希望能夠通知對方也更新，這就是所謂的數據雙向綁定。返回值返回傳入函數的對象，即第一個參數該方法重點是描述，對象里目前存在的屬性描述符有兩種主要形式數據描述符和存取描述符。 前言 談起當前前端最熱門的 js 框架，必少不了 Vue、React、Angular，對于大多數人來說，我們更多的是在使用框架，對于框架解決痛點背后使用的基本原理往往關注...
閱讀 1509·2021-11-17 09:33
閱讀 1276·2021-10-11 10:59
閱讀 2906·2021-09-30 09:48
閱讀 1916·2021-09-30 09:47
閱讀 3041·2019-08-30 15:55
閱讀 2349·2019-08-30 15:54
閱讀 1502·2019-08-29 15:25
閱讀 1659·2019-08-29 10:57
