淺談vue,angular,react數(shù)據(jù)雙向綁定原理分析

傳統(tǒng)做法

前端維護(hù)狀態(tài)，手動操作DOM更新視圖。前端框架對服務(wù)器數(shù)據(jù)通過模版進(jìn)行渲染。當(dāng)用戶產(chǎn)生了一個動作之后，我們通過document.getElementBy... 手動進(jìn)行DOM更新。
框架幫忙分離數(shù)據(jù)和視圖，后續(xù)狀態(tài)更新需要手動操作DOM，因為框架只管首次渲染，不追蹤狀態(tài)監(jiān)聽變化。

雙向數(shù)據(jù)綁定

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

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

不同的前端 MV* 框架對于這種 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 對應(yīng)的 DOM 元素的各種事件，在檢測到 View 狀態(tài)變更后，將變更的數(shù)據(jù)發(fā)送到 Model（通過兩邊的監(jiān)聽事件）。相較于 Backbone，AngularJS 所代表的 MVVM 框架則更進(jìn)一步，從框架層面支持這種數(shù)據(jù)同步機(jī)制，而且是雙向數(shù)據(jù)綁定：

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

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

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

Vue 雙向數(shù)據(jù)綁定實現(xiàn)

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

  function defineReactive(obj, key, value){
    var dep = new Dep();
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactGetter(){
        if(Dep.target){
          dep.depend();
        }
        return value;
      },
      set: function reactSetter(newVal){
        if (value === newVal) {
          return;
        } else {
          value = newVal;
          //如果數(shù)據(jù)發(fā)生改變，則通知所有的 watcher（借助 dep.notify()）
          dep.notify();
        }
      }
    })
  }

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

數(shù)據(jù)綁定關(guān)系的識別過程

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

  <form id="test">
    <input type="text" v-model="name">
  </form>

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

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

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

執(zhí)行 vm.name = ‘zhyupeng' 后，頁面上 input 也會更新為顯示： zhyupeng。在頁面文本框中修改內(nèi)容為：yupeng，則通過vm.name 獲取的值為：'yupeng'

React數(shù)據(jù)綁定

React采用這種方式，考慮虛擬DOM樹的更新：

1. 屬性更新，組件自己處理
2. 結(jié)構(gòu)更新，重新“渲染”子樹（虛擬DOM），找出最小改動步驟，打包DOM操作，給真實DOM樹打補(bǔ)丁

單純從數(shù)據(jù)綁定來看，React虛擬DOM沒有數(shù)據(jù)綁定，因為setState()不維護(hù)上一個狀態(tài)（狀態(tài)丟棄），談不上綁定

從數(shù)據(jù)更新機(jī)制來看，React類似于提供數(shù)據(jù)模型的方式（必須通過state更新）

沒有雙向數(shù)據(jù)綁定的話，input的雙向場景要怎么實現(xiàn)？通過框架提供的API，手動通知數(shù)據(jù)變化，和操作DOM的方式很像

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。