結(jié)果：

到這，雖然set方法觸發(fā)了，但是文本節(jié)點{{text}}的內(nèi)容沒有變化，要讓綁定的文本節(jié)點同步變化，我們需要引入訂閱發(fā)布模式。

六、訂閱發(fā)布模式

訂閱發(fā)布模式（又稱觀察者模式）定義了一種一對多的關(guān)系，讓多個觀察者同時監(jiān)聽某一個主題對象，這個主題對象的狀態(tài)發(fā)生改變時就會通知所有觀察者對象。

發(fā)布者發(fā)出通知 => 主題對象收到通知并推送給訂閱者 => 訂閱者執(zhí)行相應(yīng)操作

首先我們要一個收集訂閱者的容器，定義一個Dep作為主題對象

然后定義訂閱者Watcher

添加訂閱者Watcher到主題對象Dep，發(fā)布者發(fā)出通知放到屬性監(jiān)聽里面

最后需要訂閱的地方

至此，比較簡單地實現(xiàn)了我們第三步用dom操作實現(xiàn)的雙向綁定效果，代碼：

 
 
 
  
  {{text}}
 
 
　　function Compile(node, vm) {
   if(node) {
    this.$frag = this.nodeToFragment(node, vm);
    return this.$frag;
   }
  }
  Compile.prototype = {
   nodeToFragment: function(node, vm) {
    var self = this;
    var frag = document.createDocumentFragment();
    var child;

    while(child = node.firstChild) {
     self.compileElement(child, vm);
     frag.append(child); // 將所有子節(jié)點添加到fragment中
    }
    return frag;
   },
   compileElement: function(node, vm) {
    var reg = /\{\{(.*)\}\}/;

    //節(jié)點類型為元素
    if(node.nodeType === 1) {
     var attr = node.attributes;
     // 解析屬性
     for(var i = 0; i < attr.length; i++ ) {
      if(attr[i].nodeName == 'v-model') {
       var name = attr[i].nodeValue; // 獲取v-model綁定的屬性名
       node.addEventListener('input', function(e) {
        // 給相應(yīng)的data屬性賦值，進(jìn)而觸發(fā)該屬性的set方法
         vm[name]= e.target.value;
       });
       // node.value = vm[name]; // 將data的值賦給該node
       new Watcher(vm, node, name, 'value');
      }
     };
    }
    //節(jié)點類型為text
    if(node.nodeType === 3) {
     if(reg.test(node.nodeValue)) {
      var name = RegExp.$1; // 獲取匹配到的字符串
      name = name.trim();
      // node.nodeValue = vm[name]; // 將data的值賦給該node
      new Watcher(vm, node, name, 'nodeValue');
     }
    }
   },
  }
  function Dep() {
   this.subs = [];
  }
  Dep.prototype = {
   addSub: function(sub) {
    this.subs.push(sub);
   },
   notify: function() {
    this.subs.forEach(function(sub) {
     sub.update();
    })
   }
  }
  function Watcher(vm, node, name, type) {
   Dep.target = this;
   this.name = name;
   this.node = node;
   this.vm = vm;
   this.type = type;
   this.update();
   Dep.target = null;
  }

  Watcher.prototype = {
   update: function() {
    this.get();
    this.node[this.type] = this.value; // 訂閱者執(zhí)行相應(yīng)操作
   },
   // 獲取data的屬性值
   get: function() {
    this.value = this.vm[this.name]; //觸發(fā)相應(yīng)屬性的get
   }
  }
  function defineReactive (obj, key, val) {
   var dep = new Dep();
   Object.defineProperty(obj, key, {
    get: function() {
      //添加訂閱者watcher到主題對象Dep
     if(Dep.target) {
      // JS的瀏覽器單線程特性，保證這個全局變量在同一時間內(nèi)，只會有同一個監(jiān)聽器使用
      dep.addSub(Dep.target);
     }
     return val;
    },
    set: function (newVal) {
     if(newVal === val) return;
     val = newVal;
     console.log(val);
     // 作為發(fā)布者發(fā)出通知
     dep.notify();
    }
   })
  }
  function observe(obj, vm) {
   Object.keys(obj).forEach(function(key) {
    defineReactive(vm, key, obj[key]);
   })
  }

 　 function Vue(options) {
   this.data = options.data;
   var data = this.data;
   observe(data, this);
   var id = options.el;
   var dom =new Compile(document.getElementById(id),this);
   // 編譯完成后，將dom返回到app中
   document.getElementById(id).appendChild(dom);
  }
  var vm = new Vue({
   el: 'app',
   data: {
    text: 'hello world'
   }
  });
 
 

七、總結(jié)

關(guān)于雙向綁定的實現(xiàn)，看了網(wǎng)上很多資料，開始看到是對Vue源碼的解析，看的過程似懂非懂。后來找到參考資料1，然后自己跟著實現(xiàn)一遍，才理解許多。感謝這篇文章的作者，寫的由淺入深，比較好理解。為了加深自己的理解，于是自己順著這個思路寫下這個筆記。本文主要了解了幾種雙向綁定的做法，然后先用原生JS，dom操作實現(xiàn)一個最簡單雙向綁定，在這個基礎(chǔ)上進(jìn)行改裝，為減少dom操作，實現(xiàn)簡單的Compile(編譯HTML)；接著為了實現(xiàn)數(shù)據(jù)監(jiān)聽，實現(xiàn)observe；最后為了實現(xiàn)數(shù)據(jù)的雙向綁定實現(xiàn)訂閱發(fā)布模式。

雖然實現(xiàn)的比較簡單，有很多功能沒有考慮，不過這個過程還是可以理解到Vue實現(xiàn)雙向綁定的原理。過程中，有思考：

1. Vue的源代碼中，用了文檔碎片fragment作為真實節(jié)點的存儲嗎？

之前有聽說用VDOM，在Vue源代碼中，也找過是否有創(chuàng)建文檔碎片，結(jié)果沒找到?？戳藚⒖假Y料4中，VDOM的介紹，好像是把節(jié)點用JS對象模擬。類似：

模板

 Item 1
 Item 2
 Item 3

js對象

var element = {
 tagName: 'ul', // 節(jié)點標(biāo)簽名
 props: { // DOM的屬性，用一個對象存儲鍵值對
  id: 'list'
 },
 children: [ // 該節(jié)點的子節(jié)點
  {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
  {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
  {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
 ]
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue2.0怎么實現(xiàn)雙向綁定”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

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