一、什麼是MVVM框架

   所謂MVVM，是Model - View - ViewModel 的簡寫。

   我的理解是

頁面上所看到的就是View。
使用Vue.js或者是其他MVVM框架，是在操作ViewModel，實現View - ViewModel的雙向互動。
然後Model就是伺服器的資源，ViewMdoel從伺服器請求資料，或者傳送資料給伺服器，就是ViewModel - Model的雙向互動。

二、雙向資料繫結的原理

    雙向資料繫結，雙向指的是兩個方向。

    一是資料驅動頁面，

    二是頁面改動了，會響應式的改變繫結的資料。主要是input的變動。

    繫結說的是MVVM框架，自動的去完成資料的改動，頁面的渲染。

    不像以前，改變頁面上的一個值，要先去獲取該元素的節點，然後再去設定它的文字內容（比如innerHTML屬性）。

    那麼更具體的講，具體實現主要使用的是，或者說細節是：

    1.Object.defineProperty屬性。這是MVVM框架的核心API。

    2.觀察者設計模式

    利用Object.defineProperty這個API實現了對Data每個屬性的監聽和回撥。

    資料驅動頁面方向：就是當去修改Data某一個屬性時，會通知觀察者，然後觀察者觸發自身的回撥函式，進而重新渲染頁面。

    頁面 =》 資料：其實就是去監聽input的oninput事件。oninput事件會去修改對應的Data的屬性值。

三、淺談Vue框架實現響應式的原理。

    前面說過，雙向資料繫結的核心是Object.definePrototype這個API，Vue的響應式主要做了四方面的工作。

    1.通過Object.definePrototype，劫持了Vue例項物件中的data屬性下的每一個值，並設定了相應的getter和setter。

   2.實現了一個compile解析器，將Vue例項物件的el屬性掛載的DOM節點下的所有節點進行解析。類似於全部銷燬，然後建立一個文件碎片fragment，將識別到的特殊的節點做特殊處理，在放入文件碎片fragment中，最後再講文件碎片fragment放進根節點，也就是掛載的元素中。

   3.實現了一個觀察者watcher，自身有一個updata方法，當資料修改的時候，就會通知觀察者呼叫updata方法，去將相應節點的textContent更新。

   4.實現了一個訊息訂閱器Dep，用來接收觀察者的訂閱，並在資料修改時通知觀察者。

那麼以上觀察者如何在Dep中訂閱訊息，怎麼實現這是一個難點。

   簡單的說，我的理解。

  參考了一篇文章，

  比如當compile解析器解析到{{message}}這樣子的文字節點的時候，就可以認為這個地方綁定了一個變數，就可以例項化一個觀察者。看到觀察者的程式碼，

 /*
  	變數的含義：
  	vm:Vue例項物件
  	node：變數所在的文字節點（就是{{message}}）
  	name：繫結的變數名（就是message）
    */
    function Watcher(vm,node,name){
        //讓全域性變數Dep的target屬性的指標指向該watcher例項
        Dep.target = this;
        this.vm = vm;
        this.node = node;
        this.name = name;
        //放入Dep.target才能update()?????????????????????????????????????????
        this.update();
        Dep.target = null;
    }
    // 觀察者使用update方法，實際上是
    Watcher.prototype = {
        update: function(){
            this.get();
            this.node.nodeValue = this.value;
        },
        //獲取data中的屬性值 
        get: function(){
            this.value = this.vm[this.name]; //觸發相應屬性的get
        }
    }

 get: function(){
      //Dep.target指標指向watcher，增加訂閱者watcher到主體物件Dep
      if(Dep.target){
         dep.addSub(Dep.target);
      }
      return val;