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

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

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

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

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

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

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

updateComponent方法在Watcher初始化時會調(diào)用一次，后續(xù)的調(diào)用就涉及到MVVM的機制了，讓我們從頭開始分析
Vue初始化時會對data中的所有屬性進行observe，調(diào)用defineReactive方法,將data屬性轉(zhuǎn)化為getter/setters存取方式。本文demo中的data={message:“jixiangwu”}相當于如下的調(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進行監(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){
  //利用閉包為每個屬性綁定一個dep對象（可視為發(fā)布者，負責發(fā)布屬性是否有變化）
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      //每次new一個watcher（訂閱者）對象的時候需要計算依賴的dep對象，Dep.target就是當前正在計算依賴的watcher對象
      if (Dep.target) {
      //調(diào)用屬性的getter方法時，存在Dep.target則將當前dep和watcher綁定
        dep.depend();
      }
    },
    set: function reactiveSetter (newVal) {
      //調(diào)用屬性的setter方法時，dep同時發(fā)布一次屬性變化的通知到所有依賴的watcher對象
      dep.notify();
    }
  }
}

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

// 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方法干了啥，其實就是dep對象上維護了一個watcher對象的隊列，wathcer對象上也維護了一份dep的隊列

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隊列中
  this.newDepIds.add(id);
  this.newDeps.push(dep);
  if (!this.depIds.has(id)) {
    // 同時將watcher對象也加入到dep對象的subs隊列中
    dep.addSub(this);
  }
};
Dep.prototype.addSub = function addSub (sub) {
  this.subs.push(sub);
};

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

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

基本等同于下面的效果