Vue原理解析之observer模塊

本文是針對Vue@2.1.8進行分析

observer是Vue核心中最重要的一個模塊（我的認爲），可以實現視圖與數據的響應式更新，底層全憑observer的支持。

observer模塊在Vue項目中的代碼位置是src/core/observer，模塊共分爲這幾個部分：

• Observer: 數據的觀察者，讓數據對象的讀寫操做都處於本身的監管之下

• Watcher: 數據的訂閱者，數據的變化會通知到Watcher，而後由Watcher進行相應的操做，例如更新視圖

• Dep: Observer與Watcher的紐帶，當數據變化時，會被Observer觀察到，而後由Dep通知到Watcher

示意圖以下：

Observer

Observer類定義在src/core/observer/index.js中，先來看一下Observer的構造函數

constructor (value: any) {
  this.value = value
  this.dep = new Dep()
  this.vmCount = 0
  def(value, '__ob__', this)
  if (Array.isArray(value)) {
      const augment = hasProto
      ? protoAugment
      : copyAugment
    augment(value, arrayMethods, arrayKeys)
    this.observeArray(value)
  } else {
    this.walk(value)
  }
}

value是須要被觀察的數據對象，在構造函數中，會給value增長__ob__屬性，做爲數據已經被Observer觀察的標誌。若是value是數組，就使用observeArray遍歷value，對value中每個元素調用observe分別進行觀察。若是value是對象，則使用walk遍歷value上每一個key，對每一個key調用defineReactive來得到該key的set/get控制權。

解釋下上面用到的幾個函數的功能：

• observeArray: 遍歷數組，對數組的每一個元素調用observe

• observe: 檢查對象上是否有__ob__屬性，若是存在，則代表該對象已經處於Observer的觀察中，若是不存在，則new Observer來觀察對象（其實還有一些判斷邏輯，爲了便於理解就不贅述了）

• walk: 遍歷對象的每一個key，對對象上每一個key的數據調用defineReactive

• defineReactive: 經過Object.defineProperty設置對象的key屬性，使得可以捕獲到該屬性值的set/get動做。通常是由Watcher的實例對象進行get操做，此時Watcher的實例對象將被自動添加到Dep實例的依賴數組中，在外部操做觸發了set時，將經過Dep實例的notify來通知全部依賴的watcher進行更新。

若是不太理解上面的文字描述能夠看一下圖：

Dep

Dep是Observer與Watcher之間的紐帶，也能夠認爲Dep是服務於Observer的訂閱系統。Watcher訂閱某個Observer的Dep，當Observer觀察的數據發生變化時，經過Dep通知各個已經訂閱的Watcher。

Dep提供了幾個接口：

• addSub: 接收的參數爲Watcher實例，並把Watcher實例存入記錄依賴的數組中

• removeSub: 與addSub對應，做用是將Watcher實例從記錄依賴的數組中移除

• depend: Dep.target上存放這當前須要操做的Watcher實例，調用depend會調用該Watcher實例的addDep方法，addDep的功能能夠看下面對Watcher的介紹

• notify: 通知依賴數組中全部的watcher進行更新操做

Watcher

Watcher是用來訂閱數據的變化的並執行相應操做（例如更新視圖）的。Watcher的構造器函數定義以下：

constructor (vm, expOrFn, cb, options) {
  this.vm = vm
  vm._watchers.push(this)
  // options
  if (options) {
    this.deep = !!options.deep
    this.user = !!options.user
    this.lazy = !!options.lazy
    this.sync = !!options.sync
  } else {
    this.deep = this.user = this.lazy = this.sync = false
  }
  this.cb = cb
  this.id = ++uid // uid for batching
  this.active = true
  this.dirty = this.lazy // for lazy watchers
  this.deps = []
  this.newDeps = []
  this.depIds = new Set()
  this.newDepIds = new Set()
  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 = function () {}
      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()
}

參數中，vm表示組件實例，expOrFn表示要訂閱的數據字段（字符串表示，例如a.b.c）或是一個要執行的函數，cb表示watcher運行後的回調函數，options是選項對象，包含deep、user、lazy等配置。

watcher實例上有這些方法：

• get: 將Dep.target設置爲當前watcher實例，在內部調用this.getter，若是此時某個被Observer觀察的數據對象被取值了，那麼當前watcher實例將會自動訂閱數據對象的Dep實例

• addDep: 接收參數dep(Dep實例)，讓當前watcher訂閱dep

• cleanupDeps: 清除newDepIds和newDep上記錄的對dep的訂閱信息

• update: 馬上運行watcher或者將watcher加入隊列中等待統一flush

• run: 運行watcher，調用this.get()求值，而後觸發回調

• evaluate: 調用this.get()求值

• depend: 遍歷this.deps，讓當前watcher實例訂閱全部dep

• teardown: 去除當前watcher實例全部的訂閱

Array methods

在src/core/observer/array.js中，Vue框架對數組的push、pop、shift、unshift、sort、splice、reverse方法進行了改造，在調用數組的這些方法時，自動觸發dep.notify()，解決了調用這些函數改變數組後沒法觸發更新的問題。在Vue的官方文檔中對這個也有說明：http://cn.vuejs.org/v2/guide/list.html#變異方法