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

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

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

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

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

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

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

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

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

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

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

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

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

function observe (value, vm) {
  // 若檢測(cè)數(shù)據(jù)不是對(duì)象，則退出
  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)建觀察者實(shí)例，觀察成功則返回新的觀察者或已有的觀察者。__ob__屬性下面將提到，即對(duì)象被觀察過后會(huì)有__ob__屬性，用于存儲(chǔ)觀察者實(shí)例。再來看看Observer類：

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

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

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

["push","pop","shift","unshift","splice","sort","reverse"]
.forEach(method => {
  // 拿到對(duì)應(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];
    }
    // 運(yùn)行原生方法
    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;
    }
    // 對(duì)插入的參數(shù)進(jìn)行數(shù)據(jù)劫持
    if (inserted) ob.observeArray(inserted);
    // 發(fā)布改變通知
    ob.dep.notify();
    return result;
  })
})

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

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

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

到這，defineProperty無法監(jiān)聽數(shù)組內(nèi)部變化的問題解決了，當(dāng)然，你通過數(shù)組下標(biāo)修改內(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()意思就是遍歷對(duì)象的每個(gè)屬性，并侵占（convert）它們的getter/setter，接下來就是整個(gè)數(shù)據(jù)劫持的重點(diǎn)函數(shù)defineReactive():

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

  // 獲取對(duì)象的對(duì)象描述
  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為對(duì)象時(shí)才有childOb)
  var childOb = observe(val);

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

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

get: function reactiveGetter () {
  // 計(jì)算value
  var value = getter ? getter.call(obj) : val
  if (Dep.target) {
    // 添加依賴
    dep.depend();
    // 如果有子觀察者，也給它添加依賴
    if (childOb) {
      childOb.dep.depend();
    }
    // 如果該屬性是數(shù)組，查看每項(xiàng)是否含觀察者對(duì)象，有則添加依賴
    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;
}

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

set: function reactiveSetter (newVal) {
  // 計(jì)算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ù)劫持就完成了?？傊?b>observe對(duì)數(shù)據(jù)對(duì)象進(jìn)行了遞歸遍歷，遞歸包括數(shù)組和子對(duì)象，將每個(gè)屬性的getter/setter進(jìn)行了改造，使得在特殊情況下獲取值（xxx.name）會(huì)添加到訂閱中心，在設(shè)置值（xxx.name = "Tom"）會(huì)觸發(fā)訂閱中心的通知事件。

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

let uid = 0;
function Dep () {
  this.id = uid++;
  this.subs = [];
}
// 添加訂閱者
Dep.prototype.addSub = function (sub) {
  this.subs.push(sub);
}
// 將自己作為依賴傳給目標(biāo)訂閱者
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ù)劫持中提到，當(dāng)Dep.target存在時(shí)調(diào)用get，會(huì)觸發(fā)dep.depend()添加訂閱者，那么這個(gè)Dep.target.addDep()方法里肯定含添加訂閱者addSub()方法。

注意Dep.target的默認(rèn)值為null。

訂閱者也就是前面提到的Watcher，因?yàn)樗灿糜?b>$watch()接口，所以這邊對(duì)其簡(jiǎn)化分析。

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

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

  this.value = this.get();
}

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

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

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

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

另外還有一個(gè)就是update函數(shù)，也就是數(shù)據(jù)的set被觸發(fā)是，其訂閱中心會(huì)發(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í)就是拿新值和舊值比較，如果不一樣就把它們作為參數(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遞歸遍歷整個(gè)data，給每個(gè)屬性創(chuàng)建一個(gè)訂閱中心，而且重寫他們的getter/setter方法：在特殊情況（Dep.target存在）下get會(huì)添加訂閱者到訂閱中心，在set時(shí)會(huì)通知訂閱中心，繼而通知每位訂閱者；訂閱者會(huì)特殊情況（Dep.target存在）下，執(zhí)行render函數(shù)，get每一個(gè)涉及到的數(shù)據(jù)。這樣，以后只要有數(shù)據(jù)發(fā)生變動(dòng)，就會(huì)觸發(fā)該訂閱者的更新函數(shù)，就會(huì)引起dom的變化！

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

溜了溜了