摘要：前言上一遍文章介紹了模版渲染的實(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值也會(huì)相應(yīng)的變化；當(dāng)用戶(hù)改變input框中的內(nèi)容時(shí)data.message的值也會(huì)跟著改變

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

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

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

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

updateComponent方法在Watcher初始化時(shí)會(huì)調(diào)用一次，后續(xù)的調(diào)用就涉及到MVVM的機(jī)制了，讓我們從頭開(kāi)始分析
Vue初始化時(shí)會(huì)對(duì)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對(duì)象的生命周期中會(huì)調(diào)用initData方法
function initData (vm) {
   var data = vm.$options.data;
   observe(data, true /* asRootData */);
}
function observe (value, asRootData) {
    ob = new Observer(value);
}
//對(duì)data進(jìn)行監(jiān)聽(tīng)
var Observer = function Observer (value) {
  if (Array.isArray(value)) {
    this.observeArray(value);
  } else {
    this.walk(value);
  }
}
//對(duì)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對(duì)象（可視為發(fā)布者，負(fù)責(zé)發(fā)布屬性是否有變化）
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      //每次new一個(gè)watcher（訂閱者）對(duì)象的時(shí)候需要計(jì)算依賴(lài)的dep對(duì)象，Dep.target就是當(dāng)前正在計(jì)算依賴(lài)的watcher對(duì)象
      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ā)布一次屬性變化的通知到所有依賴(lài)的watcher對(duì)象
      dep.notify();
    }
  }
}

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

// 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對(duì)象上維護(hù)了一個(gè)watcher對(duì)象的隊(duì)列，wathcer對(duì)象上也維護(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對(duì)象加入到wather對(duì)象的newDeps隊(duì)列中
  this.newDepIds.add(id);
  this.newDeps.push(dep);
  if (!this.depIds.has(id)) {
    // 同時(shí)將watcher對(duì)象也加入到dep對(duì)象的subs隊(duì)列中
    dep.addSub(this);
  }
};
Dep.prototype.addSub = function addSub (sub) {
  this.subs.push(sub);
};

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

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

基本等同于下面的效果