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

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

模版字符串轉AST語法樹
AST語法樹轉render函數
Vue雙向綁定原理
Vue虛擬dom比較原理

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

在說雙向綁定之前，我們先聊聊單向數據流的概念，引用一下Vuex官網的一張圖：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

["push","pop","shift","unshift","splice","sort","reverse"]
.forEach(method => {
  // 拿到對應的原生方法
  var original = arrayProto[method];
  def(arrayMethods, method, () => {
    // 參數處理
    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__;
    // 特殊處理數組插入方法
    var inserted;
    switch (method) {
      case "push":
        inserted = args;
        break;
      case "unshift":
        inserted = args;
        break;
      case "splice":
        inserted = args.slice(2);
        break;
    }
    // 對插入的參數進行數據劫持
    if (inserted) ob.observeArray(inserted);
    // 發布改變通知
    ob.dep.notify();
    return result;
  })
})

能看出arrayMethods的構造其實也很簡單，首先是根據數組的prototype創建一個新對象，然后對數組方法進行逐個重寫。方法重寫的重點在于：

繼續監聽插入類方法（push、unshift、splice）帶入的新數據

數組方法在調用時強行觸發通知：dep.notify()

到這，defineProperty無法監聽數組內部變化的問題解決了，當然，你通過數組下標修改內部數據還是察覺不到的！

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

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，接下來就是整個數據劫持的重點函數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;

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

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

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

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

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

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

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

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

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

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;

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

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

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

Watcher接收3個參數，vm：Vue實例對象，fn：渲染函數，cb：更新函數。先看看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()方法內為了防止重復添加訂閱者到訂閱中心，故維護了一個Set用于存儲訂閱中心（Dep）的id，每次添加前看是否已存在。
Watcher在初始化時，執行了get()函數，看看方法內部：

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

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

另外還有一個就是update函數，也就是數據的set被觸發是，其訂閱中心會發布通知（notify()），而notify()方法的本質就是依次執行訂閱者的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()方法其實就是拿新值和舊值比較，如果不一樣就把它們作為參數，執行更新回調函數。

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

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

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

溜了溜了