刺破 Vue 的心臟之——響應式原始碼分析

小蟲巨蟹發表於2017-07-23
Vue原始碼

之前發刺破 vue 的心臟之——詳解 render function code的時候，承諾過會對 Vue 的核心過程的各個部分通過原始碼解析的方式進行抽絲剝繭的探索，今天就來進入第二部分響應式原理部分的原始碼解析，承諾兌現得有些晚，求輕拍

一、先分析工作原理

還是之前的套路，在讀原始碼之前，先分析原理


上圖來自 Vue 官網深入響應式原理，建議先看看，這裡主要說說我的理解：在初始化的時候，首先通過 Object.defineProperty 改寫 getter/setter 為 Data 注入觀察者能力，在資料被呼叫的時候，getter 函式觸發，呼叫方(會為呼叫方建立一個 Watcher)將會被加入到資料的訂閱者序列，當資料被改寫的時候，setter 函式觸發，變更將會通知到訂閱者(Watcher)序列中，並由 Watcher 觸發 re-render，後續的事情就是通過 render function code 生成虛擬 dom，進行 diff 比對，將不同反應到真實的 dom 中

二、原始碼分析

記住一個例項

讀原始碼是一件枯燥的事情，帶著問題去找答案，要更容易讀得進去

<template>
...
</template>
<script>
  export default {
    data () {
      return {
        name: 'hello'
      }
    },
    computed: {
      cname: function () {
        return this.name + 'world'
      }
    }
  }
</script>
<style>
...
</style>複製程式碼

為了減少干擾，例子已經剝離得只剩下兩個關鍵的要素，資料屬性 name，以及呼叫了該屬性的計算屬性 cname，這其中 cname 跟 name 就是訂閱者跟被訂閱者的關係。我們現在需要帶著這樣的疑問去閱讀原始碼，cname 是如何成為 name 的訂閱者的，並且當 name 發生了變更的時候，如何通知到 cname 更新自己的資料

初始化資料，注入觀察者能力

響應式處理的原始碼在 src/core/observer 目錄下，見名之意，這使用了觀察者模式，先不用著急進入這個目錄，在 Vue 例項初始化的時候，會執行到 src/core/instance/state.js 中相關的狀態初始化邏輯，先到這個檔案來看看：

export function initState (vm: Component) {
  ...
  if (opts.data) {
    // 初始化資料
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  // 初始化計算屬性
  if (opts.computed) initComputed(vm, opts.computed)
  ...
}複製程式碼

我們所關注的初始化資料和初始化計算屬性在這裡都會被執行到，先來分析下 initData, 沿著方法跟下去，發現最終 initData 要做的事情是:

  // observe data
  observe(data, true /* asRootData */)複製程式碼

呼叫 observe 方法為 data 注入觀察者能力，這個時候我們可以正式進入 observer/index.js 檔案了，在這個檔案我們可以找到 observe 方法的定義，跟著方法讀下去，找到下一步的關鍵訊號：

ob = new Observer(value)複製程式碼

這一步通過傳入的 data，建立一個 Observer 例項，再跟到 Observer 的建構函式中會發現，建構函式會為 data 的各個元素（當 data 為陣列的時候）或者各個屬性（當 data 為物件的時候）遞迴的建立 Observer 物件，最終起作用的方法是 defineReactive

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

  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  const getter = property && property.get
  const setter = property && property.set

  let childOb = observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      // 當前的 Watcher
      if (Dep.target) {
        // 將當前的 watcher 加入到該資料的訂閱者序列
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
        }
        if (Array.isArray(value)) {
          dependArray(value)
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = observe(newVal)
      // 當資料發生變更的時候，通知訂閱方進行資料變更
      dep.notify()
    }
  })
}複製程式碼

程式碼貼得有點多，但著實不是為了湊字數，因為在這裡部分省略可能會帶來一些疑惑，就沒有進行縮減，見諒。這裡主要是通過 Object.defineProperty 方法，重寫資料的 set 和 get 方法，當資料被呼叫時，set 方法會將當前的 Watcher Dep.target 也就是當前的呼叫方加入到該資料的訂閱者序列中，當資料變更，set 方法發通知到所有訂閱者，讓大家重新計算。這其中定義在 observer/dep.js 檔案中的 Dep 定義了資料訂閱者的訂閱、取消訂閱等行為，在這裡就不貼程式碼了。

回憶一下我們例項中的 name 和計算屬性 cname，當 cname 的方法執行的時候，name 被呼叫，就會觸發它的 get 方法，這個時候 cname 所對應的 watcher (computed 初始化的時候會為每個計算屬性建立一個 watcher)。當 name 發生了變更，set 方法被觸發，cname 所對應的 watcher 作為訂閱者就會被通知到，從而重新計算 cname 的值

初始化計算屬性，建立 Watcher

回到 src/core/instance/state.js 檔案的計算屬性初始化邏輯 initComputed，這個方法不負眾望的為計算屬性建立了 Watcher 物件

  // create internal watcher for the computed property.
  watchers[key] = new Watcher(vm, getter, noop, computedWatcherOptions)複製程式碼

於是乎我們的視線需要轉移到 observer/watcher.js 中，Watcher 的建構函式中最為關鍵的是，this.get 方法的呼叫

this.value = this.lazy
      ? undefined
      : this.get()複製程式碼

在 this.get 方法中有兩步尤為關鍵(對於計算屬性來說，會進行延遲計算，這就是 this.lazy 標誌的意義所在)：

 get () {
    // 將當前的呼叫者 watcher 置為 Dep.target
    pushTarget(this)
    let value
    const vm = this.vm
    try {
      // 呼叫方法，計算依賴方的值
      value = this.getter.call(vm, vm)
    } catch (e) {
      ...
    } finally {
      ...
    }
    return value
  }複製程式碼
  1. pushTarget(this) 將 watcher 置為 Dep.target，當所依賴的資料的 get 方法被呼叫的時候，就可以根據 Dep.target 把當前的 watcher 加入到訂閱者序列中。這麼做的目的是，當 watcher 依賴於多個資料的時候，可以共享 Dep.target
  2. 執行 this.getter.call(vm, vm) 方法計算值，例如計算屬性 cname 的 getter 就是它的定義函式function(){this.name + 'world'}。此時依賴方的 get 方法被觸發，整個流程就能串起來，說得通了

對於計算屬性，還有一個細節，需要將視線再轉移到 initComputed 中：

export function defineComputed (target: any, key: string, userDef: Object | Function) {
  ...
  Object.defineProperty(target, key, sharedPropertyDefinition)
}複製程式碼

它所呼叫的 defineComputed 方法會為計算屬性在當前的元件例項中建立一個同名的屬性，這也就是為何計算屬性的定義上是方法，但是在實際的使用當中卻是屬性的原因。只有在它所依賴的資料更新的時候，資料通過 set 方法通知到它，它才會重新計算並把值賦給這個新建的代理屬性。計算屬性高效就高效在這裡

三、總結

寫原始碼分析難以覆蓋到方方面面，畢竟不能一直貼程式碼，如何在貼最少量程式碼的情況下把問題說清楚，這仍然還是努力的方向。在達到這個目標之前，只能通過提問的方式了，有問題歡迎評論，盡力解答

此文還在公眾號菲麥前端中釋出：

相關文章