1.vue中數(shù)據(jù)的雙向綁定采用的時候，數(shù)據(jù)劫持的模式。其實主要是用了Es5中的Object.defineProperty;來劫持每個屬性的getter,和setter。這也正是Vue不兼容IE8以下的原因。

2.Object.defineProerty();

var obj = {};    Object.defineProperty(obj,"hello",{      enumerable: true,   //表示這個屬性能夠通過 for -- in 循環(huán) (是否可枚舉);      configurable: true,  //表示這個屬性能否用 delete 刪除      get(){ //獲取屬性值，說白了就是返回值        return this.val;      },      set(newVale){ //對屬性的處理 (說白了: 就是在賦值的過程中提供一個方法來決定返回值)        this.val = newVale + 5;         console.log(this.val); // 10      }    })    obj.hello = 5;    console.log(obj.hello) ; // 10

3.實現(xiàn)簡單的雙向綁定

<input type="text" id="a"><div id="b"></div><script type="text/javascript">  var obj = {};  Object.defineProperty(obj,`value`,{    enumerable: true,    configurable: true,    get(){      return this.val;    },    set(newValue){      document.getElementById(`b`).innerText = newValue;      this.val = newValue; //66    }  });  document.getElementById(`a`).addEventListener(`input`,function(event){    var text = event.target.value; //66    obj.value = text;  },false)</script>

這種方式簡單粗暴，直接通過操作DOM完成綁定。我想，肯定有人會認(rèn)為，你這樣寫，還不如在input事件中直接對Id為B的DOM元素賦值，這樣不是多此一舉嗎？請看下面在框架中我們該如何實現(xiàn)。

4.實現(xiàn)簡單的  v-model

首先我們需要獲取文檔中的真實元素節(jié)點也就是VUE中實列話VUE中元素掛載點(el);在通過createDocumentFragment創(chuàng)建文檔碎片，解析操作完畢后，把碎片放置在DOM中。

<div id="app">  <input type="text" id="a" v-model="text">  {{text}}</div>　<script type="text/javascript">  function Model(node, vm) {    if(node) {this.$frag = this.nodeToFragment(node, vm);      return this.$frag;    }  }  Model.prototype = {    construtor:'Model',    nodeToFragment: function(node, vm) {      var self = this;      var frag = document.createDocumentFragment();      var child;      while(child = node.firstChild) {        self.moelElement(child, vm);        frag.appendChild(child); // 將所有子節(jié)點添加到fragment中，child是指向元素首個子節(jié)點的引用。// 將child引用指向的對象append到父對象的末尾，原來child引用的對象就跳到了frag對象的末尾，// 而child就指向了本來是排在第二個的元素對象。如此循環(huán)下去，鏈接就逐個往后跳了      }      return frag;    },    moelElement: 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.data[name]= e.target.value;            });            node.value = vm.data[name]; // 將data的值賦給該node            node.removeAttribute('v-model');          }        };      }      //節(jié)點類型為text      if(node.nodeType === 3) {        if(reg.test(node.nodeValue)) {          var name = RegExp.$1; // 獲取匹配到的字符串 () 正則中的分組。通過$1獲取第一個分組          name = name.trim();          node.nodeValue = vm.data[name]; // 將data的值賦給該node        }      }    },  }  function Vue(options) {    this.data = options.data;    var data = this.data;    var id = options.el;    var dom =new Model(document.getElementById(id),this);    // 編譯完成后，將dom返回到app中    document.getElementById(id).appendChild(dom);  }  var vm = new Vue({    el: 'app',    data: {      text: 'hello world'    }  });</script>