Vue源碼解析：雙向綁定原理

經過對 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建立一個新對象，而後對數組方法進行逐個重寫。方法重寫的重點在於：

1. 繼續監聽插入類方法（push、unshift、splice）帶入的新數據
2. 數組方法在調用時強行觸發通知：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的變化！

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

溜了溜了