淺談vue,angular,react數(shù)據(jù)雙向綁定原理分析-創(chuàng)新互聯(lián)

傳統(tǒng)做法

目前創(chuàng)新互聯(lián)已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、贛榆網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

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

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

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

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

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

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

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

數(shù)據(jù)與視圖的綁定與同步，最終體現(xiàn)在對(duì)數(shù)據(jù)的讀寫處理過程中，也就是 Object.defineProperty() 定義的數(shù)據(jù) set、get 函數(shù)中。Vue 中對(duì)于的函數(shù)為 defineReactive，在精簡版實(shí)現(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();
        }
      }
    })
  }

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前文章：淺談vue,angular,react數(shù)據(jù)雙向綁定原理分析-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://muchs.cn/article10/ddcsdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、定制開發(fā)、用戶體驗(yàn)、企業(yè)網(wǎng)站制作、標(biāo)簽優(yōu)化、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)