[Vue源碼]一起來學Vue雙向綁定原理-數據劫持和發佈訂閱

有一段時間沒有更新技術博文了，因為這段時間埋下頭來看Vue源碼了。本文我們一起通過學習雙向綁定原理來分析Vue源碼。預計接下來會圍繞Vue源碼來整理一些文章，如下。 "一起來學Vue雙向綁定原理數據劫持和發佈訂閱" "一起來學Vue模板編譯原理(一) Template生成AST" "一起來學Vue ...

有一段時間沒有更新技術博文了，因為這段時間埋下頭來看Vue源碼了。本文我們一起通過學習雙向綁定原理來分析Vue源碼。預計接下來會圍繞Vue源碼來整理一些文章，如下。

這些文章統一放在我的git倉庫：https://github.com/yzsunlei/javascript-series-code-analyzing。覺得有用記得star收藏。

簡單應用

我們先來看一個簡單的應用示例：

<div id="app">
  <input id="input" type="text" v-model="text">
  <div id="text">輸入的值為：{{text}}</div>
</div>
<script>
  var vm = new Vue({
      el: '#app',
      data: {
        text: 'hello world'
      }
  })
</script>

上面的示例具有的功能就是初始時，'hello world'字元串會顯示在input輸入框中和div文本中，當手動輸入值後，div文本的值也相應的改變。

我們來簡單理一下實現思路：

1、input輸入框以及div文本和data中的數據進行綁定
2、input輸入框內容變化時，data中的對應數據同步變化，即 view => model
3、data中數據變化時，對應的div文本內容同步變化，即 model => view

原理介紹

Vue.js是通過數據劫持以及結合發佈者-訂閱者來實現雙向綁定的，數據劫持是利用ES5的Object.defineProperty(obj, key, val)來劫持各個屬性的的setter以及getter，在數據變動時發佈消息給訂閱者，從而觸發相應的回調來更新視圖。

雙向數據綁定，簡單點來說分為三個部分：

1、Observer：觀察者，這裡的主要工作是遞歸地監聽對象上的所有屬性，在屬性值改變的時候，觸發相應的watcher。
2、Watcher：訂閱者，當監聽的數據值修改時，執行響應的回調函數（Vue裡面的更新模板內容）。
3、Dep：訂閱管理器，連接Observer和Watcher的橋梁，每一個Observer對應一個Dep，它內部維護一個數組，保存與該Observer相關的Watcher。

DEMO實現雙向綁定

下麵我們來一步步的實現雙向數據綁定。

第一部分是Observer：

function Observer(obj, key, value) {
  var dep = new Dep();
  if (Object.prototype.toString.call(value) == '[object Object]') {
    Object.keys(value).forEach(function(key) {
      new Observer(value, key, value[key])
    })
  };

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      if (Dep.target) {
        dep.addSub(Dep.target);
      };
      return value;
    },
    set: function(newVal) {
      value = newVal;
      dep.notify();
    }
  })
}

遞歸的為對象obj的每個屬性添加getter和setter。在getter中，我們把watcher添加到dep中。在setter中，觸發watcher執行回調。

第二部分是Watcher：

function Watcher(fn) {
  this.update = function() {
    Dep.target = this;
    fn();
    Dep.target = null;
  }
  this.update();
}

fn是數據變化後要執行的回調函數，一般是獲取數據渲染模板。預設執行一遍update方法是為了在渲染模板過程中，調用數據對象的getter時建立兩者之間的關係。因為同一時刻只有一個watcher處於激活狀態，把當前watcher綁定在Dep.target（方便在Observer內獲取）。回調結束後，銷毀Dep.target。

第三部分是Dep：

function Dep() {
  this.subs = [];

  this.addSub = function (watcher) {
    this.subs.push(watcher);
  }

  this.notify = function() {
    this.subs.forEach(function(watcher) {
      watcher.update();
    });
  }
}

內部一個存放watcher的數組subs。addSub用於向數組中添加watcher(getter時)。notify用於觸發watcher的更新(setter時)。

以上我們就完成了簡易的雙向綁定的功能，我們用一下看是不是能達到上面簡單應用同樣的效果。

<div id="app">
  <input id="input" type="text" v-model="text">
  <div id="text">輸入的值為：{{text}}</div>
</div>
<script type="text/javascript">
  var obj = {
    text: 'hello world'
  }
  Object.keys(obj).forEach(function(key){
    new Observer(obj, key, obj[key])
  });
  new Watcher(function(){
    document.querySelector("#text").innerHTML = "輸入的值為：" + obj.text;
  })
  document.querySelector("#input").addEventListener('input', function(e) {
    obj.text = e.target.value;
  })
</script>

當然上面這是最簡單的雙向綁定功能，Vue中還實現了對數組、對象的雙向綁定，下麵我們來看看Vue中的實現。

Vue中的雙向綁定

看Vue的實現源碼前，我們先來看下下麵這張圖，經典的Vue雙向綁定原理示意圖（圖片來自於網路）：

Vue雙向綁定示意圖

簡單解析如下：

1、實現一個數據監聽器Obverser，對data中的數據進行監聽，若有變化，通知相應的訂閱者。
2、實現一個指令解析器Compile，對於每個元素上的指令進行解析，根據指令替換數據，更新視圖。
3、實現一個Watcher，用來連接Obverser和Compile, 併為每個屬性綁定相應的訂閱者，當數據發生變化時，執行相應的回調函數，從而更新視圖。

Vue中的Observer：

首先是Observer對象，源碼位置src/core/observer/index.js

export class Observer {
  value: any;
  dep: Dep;
  vmCount: number;

  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    // 添加__ob__來標示value有對應的Observer
    def(value, '__ob__', this)
    if (Array.isArray(value)) { // 處理數組
      if (hasProto) { // 實現是'__proto__' in {}
        protoAugment(value, arrayMethods)
      } else {
        copyAugment(value, arrayMethods, arrayKeys)
      }
      this.observeArray(value)
    } else { // 處理對象
      this.walk(value)
    }
  }

  // 給對象每個屬性添加getter/setters
  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i]) // 重點
    }
  }

  // 迴圈觀察數組的每一項
  observeArray (items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i]) // 重點
    }
  }
}

整體上，value分為對象或數組兩種情況來處理。這裡我們先來看看defineReactive和observe這兩個比較重要的函數。

export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep()

  const property = Object.getOwnPropertyDescriptor(obj, key)
  // 帶有不可配置的屬性直接跳過
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  // 保存對象屬性上自有的getter和setter
  const getter = property && property.get
  const setter = property && property.set
  // 如果屬性上之前沒有定義getter，並且沒有傳入初始val值，就把屬性原有的值賦值給val
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }

  let childOb = !shallow && observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      // 給屬性設置getter
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        // 給每個屬性創建一個dep
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          // 如果是數組，就遞歸創建
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      // 給屬性設置setter
      const value = getter ? getter.call(obj) : val
      // 值未變化，就跳過
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter() // 非生產環境自定義調試用，這裡忽略
      }
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      // 值發生變化進行通知
      dep.notify()
    }
  })
}

defineReactive這個方法裡面，是具體的為對象的屬性添加getter、setter的地方。它會為每個值創建一個dep，如果用戶為這個值傳入getter和setter，則暫時保存。之後通過Object.defineProperty，重新添加裝飾器。在getter中，dep.depend其實做了兩件事，一是向Dep.target內部的deps添加dep，二是將Dep.target添加到dep內部的subs，也就是建立它們之間的聯繫。在setter中，如果新舊值相同，直接返回，不同則調用dep.notify來更新與之相關的watcher。

export function observe (value: any, asRootData: ?boolean): Observer | void {
  // 如果不是對象就跳過
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob: Observer | void
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    // 如果已有observer，就直接返回，上面講到過會用`__ob__`屬性來記錄
    ob = value.__ob__
  } else if (
    shouldObserve &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    // 如果沒有，就創建一個
    ob = new Observer(value)
  }
  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob
}

observe這個方法用於觀察一個對象，返回與對象相關的Observer對象，如果沒有則為value創建一個對應的Observer。

好的，我們再回到Observer，如果傳入的是對象，我們就調用walk，該方法就是遍歷對象，對每個值執行defineReactive。

對於傳入的對象是數組的情況，其實會有一些特殊的處理，因為數組本身只引用了一個地址，所以對數組進行push、splice、sort等操作，我們是無法監聽的。所以，Vue中改寫value的__proto__（如果有），或在value上重新定義這些方法。augment在環境支持__proto__時是protoAugment，不支持時是copyAugment。

// augment在環境支持__proto__時
function protoAugment (target, src: Object) {
  target.__proto__ = src
}
// augment在環境不支持__proto__時
function copyAugment (target: Object, src: Object, keys: Array<string>) {
  for (let i = 0, l = keys.length; i < l; i++) {
    const key = keys[i]
    def(target, key, src[key])
  }
}

augment在環境支持__proto__時，就很簡單，調用protoAugment其實就是執行了value.__proto__ = arrayMethods。augment在環境支持__proto__時，調用copyAugment中迴圈把arrayMethods上的arrayKeys方法添加到value上。

那這裡我們就要看看arrayMethods方法了。arrayMethods其實是改寫了數組方法的新對象。arrayKeys是arrayMethods中的方法列表。

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

const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

methodsToPatch.forEach(function (method) {
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    // 是push、unshift、splice時，重新觀察數組，因為這三個方法都是像數組中添加新的元素
    if (inserted) ob.observeArray(inserted)
    // 通知變化
    ob.dep.notify()
    return result
  })
})

實際上還是調用數組相應的方法來操作value，只不過操作之後，添加了相關watcher的更新。調用push、unshift、splice三個方法參數大於2時，要重新調用ob.observeArray，因為這三種情況都是像數組中添加新的元素，所以需要重新觀察每個子元素。最後在通知變化。

Vue中的Observer就講到這裡了。實際上還有兩個函數set、del沒有講解，其實就是在添加或刪除數組元素、對象屬性時進行getter、setter的綁定以及通知變化，具體可以去看源碼。

Vue中的Dep：

看完Vue中的Observer，然後我們來看看Vue中Dep，源碼位置：src/core/observer/dep.js。

let uid = 0
export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;

  constructor () {
    this.id = uid++
    this.subs = []
  }

  // 添加訂閱者
  addSub (sub: Watcher) {
    this.subs.push(sub)
  }

  // 移除訂閱者
  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }

  // 添加到訂閱管理器
  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }

  // 通知變化
  notify () {
    const subs = this.subs.slice()
    if (process.env.NODE_ENV !== 'production' && !config.async) {
      subs.sort((a, b) => a.id - b.id)
    }
    // 遍歷所有的訂閱者，通知更新
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

Dep類就比較簡單，內部有一個id和一個subs，id用於作為dep對象的唯一標識，subs就是保存watcher的數組。相比於上面我們自己實現的demo應用，這裡多了removeSub和depend。removeSub是從數組中移除某個watcher，depend是調用了watcher的addDep。

好，Vue中的Dep只能說這麼多了。

Vue中的Watcher：

最後我們再來看看Vue中的Watcher，源碼位置：src/core/observer/watcher.js。

// 註，我刪除了源碼中一些不太重要或與雙向綁定關係不太大的邏輯，刪除的代碼用// ... 表示
let uid = 0
export default class Watcher {
  vm: Component;
  expression: string;
  cb: Function;
  id: number;
  deep: boolean;
  user: boolean;
  lazy: boolean;
  sync: boolean;
  dirty: boolean;
  active: boolean;
  deps: Array<Dep>;
  newDeps: Array<Dep>;
  depIds: SimpleSet;
  newDepIds: SimpleSet;
  before: ?Function;
  getter: Function;
  value: any;

  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm
    if (isRenderWatcher) {
      vm._watcher = this
    }
    vm._watchers.push(this)
    // ...
    this.cb = cb
    this.id = ++uid
    // ...
    this.expression = process.env.NODE_ENV !== 'production'
      ? expOrFn.toString()
      : ''
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
      if (!this.getter) {
        this.getter = noop
        process.env.NODE_ENV !== 'production' && warn(
          `Failed watching path: "${expOrFn}" ` +
          'Watcher only accepts simple dot-delimited paths. ' +
          'For full control, use a function instead.',
          vm
        )
      }
    }
    this.value = this.lazy
      ? undefined
      : this.get()
  }

  get () {
    pushTarget(this)
    let value
    const vm = this.vm
    // ...
    if (this.deep) {
      traverse(value)
    }
    popTarget()
    this.cleanupDeps()
    return value
  }

  addDep (dep: Dep) {
    const id = dep.id
    if (!this.newDepIds.has(id)) {
      this.newDepIds.add(id)
      this.newDeps.push(dep)
      if (!this.depIds.has(id)) {
        dep.addSub(this)
      }
    }
  }

  cleanupDeps () {
    // ...
  }

  update () {
    // 更新三種模式吧，lazy延遲更新，sync同步更新直接執行，預設非同步更新添加到處理隊列
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      this.run()
    } else {
      queueWatcher(this)
    }
  }

  run () {
    // 觸發更新，在這裡調用cb函數
    if (this.active) {
      const value = this.get()
      if (
        value !== this.value ||
        isObject(value) ||
        this.deep
      ) {
        const oldValue = this.value
        this.value = value
        if (this.user) {
          try {
            this.cb.call(this.vm, value, oldValue)
          } catch (e) {
            handleError(e, this.vm, `callback for watcher "${this.expression}"`)
          }
        } else {
          this.cb.call(this.vm, value, oldValue)
        }
      }
    }
  }

  evaluate () {
    // ...
  }

  depend () {
    let i = this.deps.length
    while (i--) {
      this.deps[i].depend()
    }
  }

  teardown () {
    // ...
  }
}

創建Watcher對象時，有兩個比較重要的參數，一個是expOrFn，一個是cb。

在Watcher創建時，會調用this.get，裡面會執行根據expOrFn解析出來的getter。在這個getter中，我們或渲染頁面，或獲取某個數據的值。總之，會調用相關data的getter，來建立數據的雙向綁定。

當相關的數據改變時，會調用watcher的update方法，進而調用run方法。我們看到，run中還會調用this.get來獲取修改之後的value值。

其實Watcher有兩種主要用途：一種是更新模板，另一種就是監聽某個值的變化。

模板更新的情況：在Vue聲明周期掛載元素時，我們是通過創建Watcher對象，然後調用updateComponent來更新渲染模板的。

 vm._watcher = new Watcher(vm, updateComponent, noop)

在創建Watcher會調用this.get，也就是這裡的updateComponent。在render的過程中，會調用data的getter方法，以此來建立數據的雙向綁定，當數據改變時，會重新觸發updateComponent。

數據監聽的情況：另一個用途就是我們的computed、watch等，即監聽數據的變化來執行響應的操作。此時this.get返回的是要監聽數據的值。初始化過程中，調用this.get會拿到初始值保存為this.value，監聽的數據改變後，會再次調用this.get並拿到修改之後的值，將舊值和新值傳給cb並執行響應的回調。

好，Vue中的Watcher就說這麼多了。其實上面註釋的代碼中還有cleanupDeps清除依賴邏輯、teardown銷毀Watcher邏輯等，留給大家自己去看源碼吧。

總結一下

Vue中雙向綁定，簡單來說就是Observer、Watcher、Dep三部分。下麵我們再梳理一下整個過程：

首先我們為每個vue屬性用Object.defineProperty()實現數據劫持，為每個屬性分配一個訂閱者集合的管理數組dep；
然後在編譯的時候在該屬性的數組dep中添加訂閱者，Vue中的v-model會添加一個訂閱者，{{}}也會，v-bind也會；
最後修改值就會為該屬性賦值，觸發該屬性的set方法，在set方法內通知訂閱者數組dep，訂閱者數組迴圈調用各訂閱者的update方法更新視圖。