摘要：前言上一遍文章介紹了模版渲染的實(shí)現(xiàn)，這篇文章將繼續(xù)介紹雙向綁定的實(shí)現(xiàn)官網(wǎng)如下，當(dāng)。

上一遍文章介紹了Vue模版渲染的實(shí)現(xiàn)（https://segmentfault.com/a/11...），這篇文章將繼續(xù)介紹雙向綁定的實(shí)現(xiàn)

官網(wǎng)demo如下，當(dāng)data。message的值變化，input的value值也會相應(yīng)的變化；當(dāng)用戶改變input框中的內(nèi)容時(shí)data.message的值也會跟著改變

new Vue({
  el: "#app",
  template: 
  `

    
    
Message is: {{ message }}
  
`,
  data(){
    return {
      message: "jixiangwu",
    }
  }
})

當(dāng)數(shù)據(jù)變化時(shí)，視圖會直接更新，在本例中當(dāng)data.message改變時(shí)，dom中綁定了data.message的視圖都會更新
上一篇文章中介紹過，new Vue的過程中會將template字符串轉(zhuǎn)換成render函數(shù)，render函數(shù)執(zhí)行后會得到vnode對象（虛擬dom），在調(diào)用_update方法會將虛擬dom更新為真實(shí)的瀏覽器dom，代碼如下：

    updateComponent = function () {
    //vm._render()生成vnode對象，vm._update()更新dom
      vm._update(vm._render(), hydrating);
    };
    //對vue實(shí)例新建一個(gè)Watcher監(jiān)聽對象，每當(dāng)vm.data數(shù)據(jù)有變化，Watcher監(jiān)聽到后負(fù)責(zé)調(diào)用updateComponent進(jìn)行dom更新
    vm._watcher = new Watcher(vm, updateComponent, noop);

updateComponent方法在Watcher初始化時(shí)會調(diào)用一次，后續(xù)的調(diào)用就涉及到MVVM的機(jī)制了，讓我們從頭開始分析
Vue初始化時(shí)會對data中的所有屬性進(jìn)行observe，調(diào)用defineReactive方法,將data屬性轉(zhuǎn)化為getter/setters存取方式。本文demo中的data={message:“jixiangwu”}相當(dāng)于如下的調(diào)用：defineReactive(vm.data,"message",vm.data["message"])

//vue對象的生命周期中會調(diào)用initData方法
function initData (vm) {
   var data = vm.$options.data;
   observe(data, true /* asRootData */);
}
function observe (value, asRootData) {
    ob = new Observer(value);
}
//對data進(jìn)行監(jiān)聽
var Observer = function Observer (value) {
  if (Array.isArray(value)) {
    this.observeArray(value);
  } else {
    this.walk(value);
  }
}
//對data中的所有屬性調(diào)用defineReactive，將其轉(zhuǎn)化為getter/setters存取方式
//Walk through each property and convert them into getter/setters.
Observer.prototype.walk = function walk (obj) {
  var keys = Object.keys(obj);
  for (var i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i], obj[keys[i]]);
  }
};
function defineReactive(obj,key,val){
  //利用閉包為每個(gè)屬性綁定一個(gè)dep對象（可視為發(fā)布者，負(fù)責(zé)發(fā)布屬性是否有變化）
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      //每次new一個(gè)watcher（訂閱者）對象的時(shí)候需要計(jì)算依賴的dep對象，Dep.target就是當(dāng)前正在計(jì)算依賴的watcher對象
      if (Dep.target) {
      //調(diào)用屬性的getter方法時(shí)，存在Dep.target則將當(dāng)前dep和watcher綁定
        dep.depend();
      }
    },
    set: function reactiveSetter (newVal) {
      //調(diào)用屬性的setter方法時(shí)，dep同時(shí)發(fā)布一次屬性變化的通知到所有依賴的watcher對象
      dep.notify();
    }
  }
}

defineReactive用到了Object.defineProperty 方法，這也是vue不支持ie8的原因，這個(gè)方法的主要作用就是set和get函數(shù)，同時(shí)也可以看到vue針對data中的所有屬性都會new一個(gè)dep對象，dep對象里面會存放所有依賴此屬性的watcher對象，此處用到了發(fā)布／訂閱模式，dep和watcher分別是發(fā)布者和訂閱者，每當(dāng)data中的屬性變化dep對象就會通知所有依賴的watcher去更新dom，下面詳細(xì)分析一下這個(gè)過程
上一篇提到，由于template中引用了{(lán){ message }}屬性，因此render函數(shù)里面會調(diào)用到vm.meessage,這時(shí)就會觸發(fā)defineReactive設(shè)置的get方法，get方法里面就會進(jìn)行（該屬性）依賴的收集，那么get方法里的Dep.target是啥呢？
上一篇提到dom初次渲染是通過(監(jiān)聽整個(gè)模版的)watcher對象初始化時(shí)調(diào)用watcher.get方法實(shí)現(xiàn)的，watcher.get方法主要是計(jì)算getter函數(shù)的值（本例中是updateComponent，更新dom）和計(jì)算依賴（哪些屬性的dep對象），Dep.target就是當(dāng)前接受計(jì)算（依賴）的全局惟一的watcher對象，具體方法如下：
1、pushTarget(this),將this(當(dāng)前watcher對象)賦值給Dep.target
2、調(diào)用this.getter，this.getter會訪問所有依賴的屬性，同時(shí)觸發(fā)屬性的getter方法
3、調(diào)用屬性getter方法中的dep.depend()，完成dep和wathcher的綁定
4、popTarget()將Dep.target值設(shè)為targetStack棧中的上一個(gè)（沒有則為空）

// the current target watcher being evaluated.
// this is globally unique because there could be only one
// watcher being evaluated at any time.
// 英文注釋都是源碼作者的注釋
Dep.target = null;
var targetStack = [];
//Evaluate the getter, and re-collect dependencies.
Watcher.prototype.get = function get () {
  //將this賦值給Dep.target
  pushTarget(this);  
  //執(zhí)行wacther的更新操作，本文中是執(zhí)行updateComponent方法
  this.getter.call(vm);
  popTarget();
}
function pushTarget (_target) {
  if (Dep.target) { targetStack.push(Dep.target); }
  Dep.target = _target;
}
function popTarget () {
  Dep.target = targetStack.pop();
}

繼續(xù)看defineReactive中dep.depend方法干了啥，其實(shí)就是dep對象上維護(hù)了一個(gè)watcher對象的隊(duì)列，wathcer對象上也維護(hù)了一份dep的隊(duì)列

Dep.prototype.depend = function depend () {
  if (Dep.target) {
    Dep.target.addDep(this);
  }
};
Watcher.prototype.addDep = function addDep (dep) {
  var id = dep.id;
  //將dep對象加入到wather對象的newDeps隊(duì)列中
  this.newDepIds.add(id);
  this.newDeps.push(dep);
  if (!this.depIds.has(id)) {
    // 同時(shí)將watcher對象也加入到dep對象的subs隊(duì)列中
    dep.addSub(this);
  }
};
Dep.prototype.addSub = function addSub (sub) {
  this.subs.push(sub);
};

data值變化時(shí)會觸發(fā)setter方法中的dep.notify,通知綁定在dep對象上的所有watcher對象調(diào)用update方法更新視圖（watcher.update最終調(diào)用了updateComponent，用到了緩存隊(duì)列，不一定立即觸發(fā)）

Dep.prototype.notify = function notify () {
  // stabilize the subscriber list first
  var subs = this.subs.slice();
  for (var i = 0, l = subs.length; i < l; i++) {
    subs[i].update();
  }
};

總結(jié)
1、對data進(jìn)行observe，針對data屬性調(diào)用Object.defineProperty設(shè)置getter和setter，同時(shí)綁定一個(gè)dep對象
2、new Watcher(vm, updateComponent, noop）監(jiān)聽整個(gè)dom的變化
3、watcher初始化時(shí)調(diào)用updateComponent，updateComponent調(diào)用render函數(shù)更新dom（此時(shí)還會將該watcher對象賦值給全局對象Dep.target，進(jìn)行依賴收集）
4、在watcher對象依賴收集期間，render函數(shù)訪問data中的屬性（如本例的data.message），觸發(fā)data.message的getter方法，在getter方法中會將data.message綁定的dep對象和wathcer對象建立對應(yīng)關(guān)系（互相加入到對方維護(hù)的隊(duì)列屬性上）
5、后續(xù)data屬性的值變化時(shí)dep對象會通知所有依賴此data屬性的watcher對象調(diào)用updateComponent方法更新視圖

視圖變化 -> 數(shù)據(jù)更新主要是通過v-model實(shí)現(xiàn)的，v-model本質(zhì)上不過是語法糖，它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，本例中

基本等同于下面的效果