摘要：無論是還是都提倡單向數(shù)據(jù)流管理狀態(tài)，那我們今天要談的雙向綁定是否和單向數(shù)據(jù)流理念有所違背我覺得不是，從上篇文章語法樹轉(zhuǎn)函數(shù)了解到，雙向綁定，實質(zhì)是的單向綁定和事件偵聽的語法糖。源碼解析今天涉及到的代碼全在文件夾下。

通過對 Vue2.0 源碼閱讀，想寫一寫自己的理解，能力有限故從尤大佬2016.4.11第一次提交開始讀，準備陸續(xù)寫：

模版字符串轉(zhuǎn)AST語法樹
AST語法樹轉(zhuǎn)render函數(shù)
Vue雙向綁定原理
Vue虛擬dom比較原理

其中包含自己的理解和源碼的分析，盡量通俗易懂！由于是2.0的最早提交，所以和最新版本有很多差異、bug，后續(xù)將陸續(xù)補充，敬請諒解！包含中文注釋的Vue源碼已上傳...

在說雙向綁定之前，我們先聊聊單向數(shù)據(jù)流的概念，引用一下Vuex官網(wǎng)的一張圖：

這是單向數(shù)據(jù)流的極簡示意，即狀態(tài)（數(shù)據(jù)源）映射到視圖，視圖的變化（用戶輸入）觸發(fā)行為，行為改變狀態(tài)。但在實際的開發(fā)中，大部分的情況是多個視圖依賴同一狀態(tài)，多個行為影響同一狀態(tài)，Vuex的處理是將共同狀態(tài)提取出來，轉(zhuǎn)化成單向數(shù)據(jù)流實現(xiàn)。另外，在Vue的父子組件中prop傳值中，也有用到單向數(shù)據(jù)流的概念，即父級 prop 的更新會向下流動到子組件中，但是反過來則不行。

無論是react還是vue都提倡單向數(shù)據(jù)流管理狀態(tài)，那我們今天要談的雙向綁定是否和單向數(shù)據(jù)流理念有所違背？我覺得不是，從上篇文章AST語法樹轉(zhuǎn)render函數(shù)了解到，Vue雙向綁定，實質(zhì)是 value 的單向綁定和 oninput/onchange 事件偵聽的語法糖。這種機制在某些需要實時反饋用戶輸入的場合十分方便，這只是Vue內(nèi)部對 action 進行了封裝而形成的。

所以我們今天要說是，狀態(tài)的變化怎么引起視圖的變化？

第一個難點是如何監(jiān)聽狀態(tài)的變化。Vue2.0主要是采用defineProperty，但它有個缺點是不能檢測到對象和數(shù)組的變化。尤大佬說3.0將采用proxy，不過兼容仍是問題，有興趣的同學可以去了解下；

另外一個難點就是狀態(tài)變化后如何觸發(fā)視圖的變化。Vue2.0采用的發(fā)布/訂閱模式，即每個狀態(tài)都會有自己的一個訂閱中心，訂閱中心放著一個個訂閱者，訂閱者身上有關(guān)于dom的更新函數(shù)。當狀態(tài)改變時會發(fā)布消息：我變了！訂閱中心會挨個告訴訂閱者，訂閱者知道了就去執(zhí)行自己的更新函數(shù)。

今天涉及到的代碼全在observer文件夾下。流程大致如下：

function Vue (options) {
    // ...
    var data = options.data;
    data = typeof data === "function" ? data() : data || {};
    observe(data, this);
    Watcher(this, this.render, this._update);
    // ...
}

先對 data 進行數(shù)據(jù)劫持（observe），然后為當前實例創(chuàng)建一個訂閱者（Watcher）。具體如何實現(xiàn)，下面將逐一闡述。

數(shù)據(jù)劫持的實質(zhì)就是使用 defineProperty 重寫對象屬性的 getter/setter 方法。但由于defineProperty 無法監(jiān)測到對象和數(shù)組內(nèi)部的變化，所以遇到子屬性為對象時，會遞歸觀察該屬性直至簡單數(shù)據(jù)類型；為數(shù)組時的處理是重寫push、pop、shift等方法，方法內(nèi)部通知訂閱中心：狀態(tài)變化了！這樣就能對所有類型數(shù)據(jù)進行監(jiān)聽了。

我們先看看入口函數(shù)observe()：

function observe (value, vm) {
  // 若檢測數(shù)據(jù)不是對象，則退出
  if (typeof value !== "object") return;
  var ob;
  if (value.__ob__ && value.__ob__ instanceof Observer) {
    ob = value.__ob__;
  } else {
    ob = new Observer(value);
  }
  return ob;
}

observe()方法嘗試為 value 創(chuàng)建觀察者實例，觀察成功則返回新的觀察者或已有的觀察者。__ob__屬性下面將提到，即對象被觀察過后會有__ob__屬性，用于存儲觀察者實例。再來看看Observer類：

function Observer (value) {
  this.value = value;
  // 給value對象通過defineProperty追加__ob__屬性
  def(value, "__ob__", this); 
  // 特殊處理數(shù)組
  if (Array.isArray(value)) {
    value.__proto__ = arrayMethods;
    value.forEach(item => {
      observe(item);
    })
  } else {
    this.walk(value);
  }
}

很明顯看到，Observer類除開屬性的定義，就是對數(shù)組的特殊處理了。處理的方法是通過原型鏈去修改數(shù)組的push、pop、shift...等等方法，當然，還需要對數(shù)組的每個元素進行observe()，因為數(shù)組元素也可能是對象，我們要繼續(xù)劫持，直到基本類型！我們先來看下arrayMethods具體是怎么修改的這些方法：

const arrayProto = Array.prototype;
export const arrayMethods = Object.create(arrayProto);

["push","pop","shift","unshift","splice","sort","reverse"]
.forEach(method => {
  // 拿到對應(yīng)的原生方法
  var original = arrayProto[method];
  def(arrayMethods, method, () => {
    // 參數(shù)處理
    var i = arguments.length;
    var args = new Array(i);
    while (i--) {
      args[i] = arguments[i];
    }
    // 運行原生方法
    var result = original.apply(this, args);
    var ob = this.__ob__;
    // 特殊處理數(shù)組插入方法
    var inserted;
    switch (method) {
      case "push":
        inserted = args;
        break;
      case "unshift":
        inserted = args;
        break;
      case "splice":
        inserted = args.slice(2);
        break;
    }
    // 對插入的參數(shù)進行數(shù)據(jù)劫持
    if (inserted) ob.observeArray(inserted);
    // 發(fā)布改變通知
    ob.dep.notify();
    return result;
  })
})

能看出arrayMethods的構(gòu)造其實也很簡單，首先是根據(jù)數(shù)組的prototype創(chuàng)建一個新對象，然后對數(shù)組方法進行逐個重寫。方法重寫的重點在于：

繼續(xù)監(jiān)聽插入類方法（push、unshift、splice）帶入的新數(shù)據(jù)

數(shù)組方法在調(diào)用時強行觸發(fā)通知：dep.notify()

到這，defineProperty無法監(jiān)聽數(shù)組內(nèi)部變化的問題解決了，當然，你通過數(shù)組下標修改內(nèi)部數(shù)據(jù)還是察覺不到的！

我們繼續(xù)來看，walk()函數(shù)：

Observer.prototype.walk = function (obj) {
  var keys = Object.keys(obj);
  for (var i = 0, l = keys.length; i < l; i++) {
    this.convert(keys[i], obj[keys[i]]);
  }
}
Observer.prototype.convert = function (key, val) {
  defineReactive(this.value, key, val);
}

walk()意思就是遍歷對象的每個屬性，并侵占（convert）它們的getter/setter，接下來就是整個數(shù)據(jù)劫持的重點函數(shù)defineReactive():

function defineReactive (obj, key, val) {
  var dep = new Dep();

  // 獲取對象的對象描述
  var property = Object.getOwnPropertyDescriptor(obj, key);
  // 是否可配置
  if (property && property.configurable === false) return;
  // 獲取原來的get、set
  var getter = property && property.get;
  var setter = property && property.set;

  // 遞歸：繼續(xù)監(jiān)聽該屬性值(只有val為對象時才有childOb)
  var childOb = observe(val);

  Object.defineProperty(obj, key, {
    enumerable: true,    // 可枚舉
    configurable: true,    // 可配置
    get: ...,
    set: ...
  })
}

以上為defineReactive()函數(shù)的內(nèi)部結(jié)構(gòu)，先定義了依賴中心Dep，再獲取對象的原生get/set方法，然后遞歸監(jiān)聽該屬性，因為當前屬性可能也是對象，最后通過defineProperty劫持getter/setter函數(shù)，依次看一下get/set:

get: function reactiveGetter () {
  // 計算value
  var value = getter ? getter.call(obj) : val
  if (Dep.target) {
    // 添加依賴
    dep.depend();
    // 如果有子觀察者，也給它添加依賴
    if (childOb) {
      childOb.dep.depend();
    }
    // 如果該屬性是數(shù)組，查看每項是否含觀察者對象，有則添加依賴
    if (isArray(value)) {
      for (var e, i = 0, l = value.length; i < l; i++) {
        e = value[i];
        e && e.__ob__ && e.__ob__.dep.depend();
      }
    }
  }
  return value;
}

大家看完這個函數(shù)，除開if語句，其他的都是get的基本邏輯。至于Dep.target的含義，我的理解是它就像一個開關(guān)，當開關(guān)在打開的狀態(tài)下訪問該屬性，則會被添加到訂閱中心。至于什么時候開關(guān)打開、關(guān)閉，以及把誰添加到訂閱中心，先留下疑問。繼續(xù)看下set：

set: function reactiveSetter (newVal) {
  // 計算value
  var value = getter ? getter.call(obj) : val;
  // 新舊值是否相等
  if (newVal === value) return;
  // 不相等，設(shè)置新值
  if (setter) {
    setter.call(obj, newVal);
  } else {
    val = newVal;
  }
  // 劫持新值
  childOb = observe(newVal);
  // 發(fā)送變更通知
  dep.notify();
}

set也比較好理解，先是新舊值的比較，若不相等，則需要：設(shè)置新值，劫持新值，發(fā)布通知。

到這，數(shù)據(jù)劫持就完成了。總之，observe對數(shù)據(jù)對象進行了遞歸遍歷，遞歸包括數(shù)組和子對象，將每個屬性的getter/setter進行了改造，使得在特殊情況下獲取值（xxx.name）會添加到訂閱中心，在設(shè)置值（xxx.name = "Tom"）會觸發(fā)訂閱中心的通知事件。

訂閱中心也就是前面提到的Dep，它要做的事情很簡單，維護一個容器（數(shù)組）存儲訂閱者，也就是說它有添加訂閱者功能和發(fā)布通知功能。簡單看一下：

let uid = 0;
function Dep () {
  this.id = uid++;
  this.subs = [];
}
// 添加訂閱者
Dep.prototype.addSub = function (sub) {
  this.subs.push(sub);
}
// 將自己作為依賴傳給目標訂閱者
Dep.prototype.depend = function () {
  Dep.target.addDep(this);
}
// 通知所有訂閱者
Dep.prototype.notify = function () {
  var subs = this.subs.slice();
  for (var i = 0, l = subs.length; i < l; i++) {
    subs[i].update();
  }
}
Dep.target = null;

數(shù)據(jù)劫持中提到，當Dep.target存在時調(diào)用get，會觸發(fā)dep.depend()添加訂閱者，那么這個Dep.target.addDep()方法里肯定含添加訂閱者addSub()方法。

注意Dep.target的默認值為null。

訂閱者也就是前面提到的Watcher，因為它也用于$watch()接口，所以這邊對其簡化分析。

Watcher接收3個參數(shù)，vm：Vue實例對象，fn：渲染函數(shù)，cb：更新函數(shù)。先看看Watcher對象：

function Watcher (vm, fn, cb) {
  this.vm = vm;
  this.fn = fn;
  this.cb = cb;
  this.depIds = new Set();

  this.value = this.get();
}

// 向當前watcher添加依賴項
Watcher.prototype.addDep = function (dep) {
  var id = dep.id;
  // 防止重復向訂閱中心添加訂閱者
  if (!this.depIds.has(id)) {
    this.depIds.add(id);
    dep.addSub(this);
  }
}

Watcher的addDep()方法內(nèi)為了防止重復添加訂閱者到訂閱中心，故維護了一個Set用于存儲訂閱中心（Dep）的id，每次添加前看是否已存在。
Watcher在初始化時，執(zhí)行了get()函數(shù)，看看方法內(nèi)部：

Watcher.prototype.get = function () {
  // 打開開關(guān)，指向自身（Watcher）
  Dep.target = this;
  // 指向渲染函數(shù)，會觸發(fā)getter
  var value = this.fn.call(this.vm);
  // 關(guān)閉開關(guān)
  Dep.target = null;
  return value;
}

之前一直不理解這邊為什么會將訂閱者推入各個訂閱中心，后來才發(fā)現(xiàn)巧妙的地方：Dep.target指向當前Watcher（打開開關(guān)），然后執(zhí)行渲染函數(shù)，渲染函數(shù)用到的數(shù)據(jù)都會觸發(fā)其get，這樣就把當前Watcher加入到這些數(shù)據(jù)的訂閱中心了！然后Dep.target = null（開關(guān)關(guān)閉）。

另外還有一個就是update函數(shù)，也就是數(shù)據(jù)的set被觸發(fā)是，其訂閱中心會發(fā)布通知（notify()），而notify()方法的本質(zhì)就是依次執(zhí)行訂閱者的update()方法。讓我們看一下：

Watcher.prototype.update = function () {
  var value = this.get();
  if (value !== this.value) {
    var oldValue = this.value;
    this.value = value;
    this.cb.call(this.vm, value, oldValue);
  }
}

update()方法其實就是拿新值和舊值比較，如果不一樣就把它們作為參數(shù)，執(zhí)行更新回調(diào)函數(shù)。

到這，關(guān)于訂閱者部分的已經(jīng)說完了。再回看到前面的調(diào)用Watcher(this, this.render, this._update);，這邊的渲染函數(shù)也就是前篇文章講的render函數(shù)，而_update函數(shù)是用于比較vdom并更新的函數(shù)，這是下一篇文章要說的內(nèi)容。

最后再來理一遍，observe遞歸遍歷整個data，給每個屬性創(chuàng)建一個訂閱中心，而且重寫他們的getter/setter方法：在特殊情況（Dep.target存在）下get會添加訂閱者到訂閱中心，在set時會通知訂閱中心，繼而通知每位訂閱者；訂閱者會特殊情況（Dep.target存在）下，執(zhí)行render函數(shù)，get每一個涉及到的數(shù)據(jù)。這樣，以后只要有數(shù)據(jù)發(fā)生變動，就會觸發(fā)該訂閱者的更新函數(shù)，就會引起dom的變化！

最近工作比較忙，博客寫的比較慢，可能也會有各種問題(┬＿┬)...

溜了溜了