Vue3源碼閱讀筆記-reactivity

時間 2019-11-07

標籤 vue3 vue 源碼閱讀筆記 reactivity 简体版

原文原文鏈接

導讀部分

本篇文章記錄Vue3源碼中對核心響應式部分(reactivity)的理解vue

分享在看vue3的reactivity的筆記，源碼建議閱讀順序：__test__ -> ref -> reactive -> effect -> computedreact

Ref模塊

Ref模塊主要提供的Api就是ref,ref接收到Object的話會對這個值進行reactive轉換。ref會返回一個新對象，新對象的value會被劫持觸發track事件和trigger事件。track事件和trigger事件先了解一下，一個是收集依賴，另外一個是觸發事件將依賴中的effect調用git

const convert = (val: any): any => (isObject(val) ? reactive(val) : val)

export function ref<T extends Ref>(raw: T): T
export function ref<T>(raw: T): Ref<T>
export function ref(raw: any) {
  //若是傳入的參數是Ref類型則結束函數
  if (isRef(raw)) {
    return raw
  }
  //若是不是對象則返回raw，是對象則進行reactive數據轉換
  raw = convert(raw)
  const v = {
    [refSymbol]: true,
    get value() {
      // 觸發track事件
      track(v, OperationTypes.GET, '')
      return raw
    },
    set value(newVal) {
      //將新數據轉換
      raw = convert(newVal)
      // 觸發trigger事件
      trigger(v, OperationTypes.SET, '')
    }
  }
  return v as Ref
}
複製代碼

模塊定義了Ref接口，規定Ref類型必須有兩個key，一個是用來識別Ref類型的symbol，另外一個則是Ref的value，前者是經過isRef來檢測是否爲Ref類型的符號，後者是Ref的值，值得一提的是這個value的類型UnwrapRefgithub

// 遞歸解開嵌套值綁定，泛型T的條件判斷
export type UnwrapRef<T> = {
  //若是是ref類型，繼續解套
  ref: T extends Ref<infer V> ? UnwrapRef<V> : T
  //若是是數組,循環解套
  array: T extends Array<infer V> ? Array<UnwrapRef<V>> : T
  //若是是對象，遍歷解套
  object: { [K in keyof T]: UnwrapRef<T[K]> }
  //中止解套
  stop: T
}[T extends Ref
  ? 'ref'
  : T extends Array<any>
    ? 'array'
    : T extends BailTypes
      ? 'stop' // 避免不該該解包的類型
      : T extends object ? 'object' : 'stop']
複製代碼

若是是一個引用類型的話會解套檢查其嵌套值，但它會避開解套Function，Set，Map，WeakSet，WeakMap。typescript

這個模塊還導出了一個toRefs方法，這個方法是用來將Reactive對象複製，返回淺複製後的新對象可供解構賦值。結構賦值後的變量是Ref類型數組

Reactive模塊

reactive模塊的核心API是reactive和readonly，這兩個方法是將對轉換爲響應式對象的方法。bash

它還引入了四個重要的處理程序：mutableHandlers和readonlyHandlers以及針對很是規對象的程序mutableCollectionHandlers和readonlyCollectionHandlers。前兩個程序的做用是對reactive或readonly常規對象的操做進行攔截並插入track和trigger事件，後兩個程序的做用是對reactive或readonly的Set, Map, WeakMap, WeakSet對象的操做進行攔截並插入track和trigger事件閉包

reactive模塊的內部擁有七個記錄集合:app

{raw < - > reactive}：Map結構，記錄raw原生數據的reactive響應式數據函數

{reactive < - > raw}：Map結構，記錄reactive響應式數據的raw原生數據

{raw < - > readonly}：Map結構，記錄raw原生數據的readonly只讀響應式數據

{readonly < - > raw}：Map結構，記錄readonly只讀響應式數據的raw原生數據

{readonlyValues}：Set結構，記錄那些須要轉換成只讀響應式數據的對象

{nonReactiveValues}：Set結構，記錄那些不須要轉換成響應式數據的對象

最後一個數據有些複雜，它長這樣

//下面的結構是一個依賴表
//Dep是一個保存反應性effect函數的Set
export type Dep = Set<ReactiveEffect>
//KeyToDepMap是一個保存Dep的Map,KeyToDepMap的鍵只能是string或symbol
export type KeyToDepMap = Map<string | symbol, Dep>
//targetMap是記錄KeyToDepMap的WeakMap結構，WeakMap的鍵只能是對象
export const targetMap = new WeakMap<any, KeyToDepMap>()

複製代碼

targetMap的結構是：{target對象 < - > KeyToDepMap}

KeyToDepMap的結構是：{key < - > Dep}

Dep的結構是：{effect依賴集合}

最後這個記錄集合是做用於track事件和trigger事件的，track收集依賴到這個依賴表中。trigger找到依賴表對應鍵，調用effect依賴

reactive方法的內部就兩個判斷。一個是若是傳入的對象是readonly響應式對象則直接返回這個對象，這裏表明readonly沒法轉爲reactive對象，另外一個則是目標對象若是存在nonReactiveValues集合中則進行readonly數據轉換並返回

readonly方法的內部就一條判斷。若是傳入對象是reactive對象則將獲取它的原生對象繼續執行。這裏能夠看出reactive對象是能夠轉換成readonly對象的

最後他們都會返回調用createReactiveObject，只不過傳入的值不一樣。

reactive傳入：{raw < - > reactive}、{reactive < - > raw}、mutableHandlers、mutableCollectionHandlers

readonly傳入：{raw < - > readonly}、{readonly < - > raw}、readonlyHandlers、readonlyCollectionHandlers

而createReactiveObject方法的做用是建立反應性對象以及幾個判斷：

function createReactiveObject( target: any, toProxy: WeakMap<any, any>, toRaw: WeakMap<any, any>, baseHandlers: ProxyHandler<any>, collectionHandlers: ProxyHandler<any> ) {
  //若是target不是對象，則不能進行數據轉換
  if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }
  let observed = toProxy.get(target)
  //判斷target是否已經有對應的響應對象
  if (observed !== void 0) {
    return observed
  }
  // 判斷target是否已是響應式對象
  if (toRaw.has(target)) {
    return target
  }
  // 判斷target是否可觀察，當target不可觀察時返回target
  if (!canObserve(target)) {
    return target
  }
  //handlers判斷target的構造函數是否爲Set, Map, WeakMap, WeakSet,若是是則返回收集處理程序，不是則返回基本處理程序
  const handlers = collectionTypes.has(target.constructor)
    ? collectionHandlers
    : baseHandlers
    //開始建立響應式對象：observed=new Proxy(target,baseHandlers|collectionHandlers)
  observed = new Proxy(target, handlers)
  //用於找到reactive對象的WeakMap保存原始對象和觀察對象
  toProxy.set(target, observed)
  //用於找到原始對象的WeakMap保存觀察對象和原始對象
  toRaw.set(observed, target)
  //若是targetMap沒有target鍵則添加
  if (!targetMap.has(target)) {
    targetMap.set(target, new Map())
  }
  //返回響應式對象
  return observed
}
複製代碼

還有一件重要的事情，reactive或readonly並不是是調用後當即遞歸將嵌套對象都轉變成響應式，而是在對嵌套對象進行讀操做時進行轉變

effect模塊

首先是effect的類型定義

用於判斷是否爲effect函數的符號
export const effectSymbol = Symbol(__DEV__ ? 'effect' : void 0)
//reactveEffect函數類型
export interface ReactiveEffect<T = any> {
  //函數調用後返回T類型
  (): T
  //用來判斷是否爲ReactiveEffect的Symbol
  [effectSymbol]: true
  //活性，stop後活性會變爲false
  active: boolean
  //原生,返回本身的原生函數
  raw: () => T
  //由Set<ReactiveEffect<any>>組成的數組
  deps: Array<Dep>
  //標記計算屬性
  computed?: boolean
  //調度器，來自配置項的scheduler
  scheduler?: (run: Function) => void
  //追蹤事件,來自配置項的onTrack
  onTrack?: (event: DebuggerEvent) => void
  //觸發事件,來自配置項的onTrigger
  onTrigger?: (event: DebuggerEvent) => void
  //中止事件,來自配置項的onStop
  onStop?: () => void
}
複製代碼

接下來是很關鍵的活性effect函數調用棧數組，這個數組是trigger和track判斷如今真正執行的函數時哪個以便記錄依賴

//活性ReactiveEffect棧，這是關鍵數據
export const activeReactiveEffectStack: ReactiveEffect[] = []
複製代碼

effect模塊的主要API:effect，它接受一個options配置，來看看這個配置對象的類型定義

//ReactiveEffect配置對象的類型
export interface ReactiveEffectOptions {
  //是否須要手動調用開始
  lazy?: boolean
  //?計算
  computed?: boolean
  //調度器,能夠看做是節點，當effect由於依賴改變而須要運行時，須要手動運行調度器運行
  scheduler?: (run: Function) => void
  //追蹤事件,監聽effect內的set操做
  onTrack?: (event: DebuggerEvent) => void
  //觸發事件,監聽effect的依賴項set
  onTrigger?: (event: DebuggerEvent) => void
  //中止事件,經過stop中止effect時觸發
  onStop?: () => void
}
複製代碼

再來看看effect的內部實現

export function effect<T = any>(
  fn: () => T,
  //Options默認值是空對象
  options: ReactiveEffectOptions = EMPTY_OBJ
): ReactiveEffect<T> {
  //若是fn已是effect則將fn改成它的原生函數
  if (isEffect(fn)) {
    fn = fn.raw
  }
  //建立ReactiveEffect函數，將options的配置複製到新函數上
  const effect = createReactiveEffect(fn, options)
  //若是option未設置lazy則直接調用
  if (!options.lazy) {
    effect()
  }
  return effect
}
複製代碼

createReactiveEffect方法用於建立Effect函數以及將一些配置加上去

function createReactiveEffect<T = any>(
  fn: () => T,
  options: ReactiveEffectOptions
): ReactiveEffect<T> {
  const effect = function reactiveEffect(...args: any[]): any {
    //每次執行的是run(effect, fn, args)
    return run(effect, fn, args)
  } as ReactiveEffect
  effect[effectSymbol] = true
  effect.active = true
  effect.raw = fn
  effect.scheduler = options.scheduler
  effect.onTrack = options.onTrack
  effect.onTrigger = options.onTrigger
  effect.onStop = options.onStop
  effect.computed = options.computed
  effect.deps = []
  return effect
}
複製代碼

每次執行effect都是執行run函數，這時活性effect調用棧排上用場了

function run(effect: ReactiveEffect, fn: Function, args: any[]): any {
  //若是目標effect不是活的，則直接調用原函數
  if (!effect.active) {
    return fn(...args)
  }
  //這是檢查activeReactiveEffectStack中有沒有effect,沒有則不執行
  if (activeReactiveEffectStack.indexOf(effect) === -1) {
    cleanup(effect)
    // try...finally的執行順序:finally在try以後運行
    // 首先try塊中的activeReactiveEffectStack.push(effect)會最早執行
    // 這條語句不會報錯，接下來返回調用fn
    // 若是這時候退出了函數，意味者finally不會運行代碼。
    // 這裏的return被推遲到了finally結束後，但fn(..args)也是在try塊中調用的
    // 下面代碼的調用順序是:activeReactiveEffectStack.push(effect) -> TemporarySave=fn(...args) -> 
    // activeReactiveEffectStack.pop() -> return TemporarySave
    try {
      //這應該是effect響應式的開始
      activeReactiveEffectStack.push(effect)
      return fn(...args)
    } finally {
      //這應該是effect響應式的結束
      activeReactiveEffectStack.pop()
    }
  }
}

複製代碼

cleanup是用於將從那些key的依賴effect集合中刪除本身，從新追蹤依賴和觸發事件

//將effect數組中的每一個Set引用中的effect刪除,清空effect的deps數組
function cleanup(effect: ReactiveEffect) {
  const { deps } = effect
  if (deps.length) {
    for (let i = 0; i < deps.length; i++) {
      deps[i].delete(effect)
    }
    deps.length = 0
  }
}
複製代碼

接下來是track和trigger，前者收集依賴到targetMap，後者從targetMap中讀取依賴effect並調用。那段源碼太長了，能夠去我github上看看

computed模塊

這個模塊相對比較繞，須要慢慢看。首先從computed開頭聲明的三個類型開始

//computed返回的類型，value是隻讀的
export interface ComputedRef<T> extends WritableComputedRef<T> {
  readonly value: UnwrapRef<T>
}
//computed返回的類型
export interface WritableComputedRef<T> extends Ref<T> {
  readonly effect: ReactiveEffect
}
//computed函數傳入Options時規定的類型
export interface WritableComputedOptions<T> {
  get: () => T
  set: (v: T) => void
}
複製代碼

接下來是核心API computed，它返回一個Ref類型

//1.接受一個函數，返回對象:只讀的effect和value，且繼承Ref類型
export function computed<T>(getter: () => T): ComputedRef<T>
//2.接受一個getter函數和setter函數配置對象，返回對象:只讀的effect,且繼承Ref類型
export function computed<T>(
  options: WritableComputedOptions<T>
): WritableComputedRef<T>
//3.返回值兼容前兩種
export function computed<T>(
  getterOrOptions: (() => T) | WritableComputedOptions<T>
): any {
  //傳入的參數是否爲函數
  const isReadonly = isFunction(getterOrOptions)
  //若是是函數則爲getter不是則爲參數的get屬性
  const getter = isReadonly
    ? (getterOrOptions as (() => T))
    : (getterOrOptions as WritableComputedOptions<T>).get
  //若是是函數且在開發環境下則是一個會報錯的setter函數，不是開發環境則是一個空函數
  //不是函數則爲參數的set屬性
  const setter = isReadonly
    ? __DEV__
      ? () => {
          console.warn('Write operation failed: computed value is readonly')
        }
      : NOOP
    : (getterOrOptions as WritableComputedOptions<T>).set
  //髒
  let dirty = true
  let value: T
  //runner是effect函數
  const runner = effect(getter, {
    lazy: true,
    // mark effect as computed so that it gets priority during trigger
    // 將效果標記爲計算，以便在觸發期間得到優先級
    computed: true,
    //由於這裏設置的調度器，依賴觸發tirgger事件只是將dirty變爲true
    scheduler: () => {
      dirty = true
    }
  })
  return {
    [refSymbol]: true,
    // expose effect so computed can be stopped
    // 暴露effect，所以能夠中止計算
    effect: runner,
    //getter函數運行時判斷dirty是否爲true，是則從新取值，不是則仍是閉包中那個value
    get value() {
      if (dirty) {
        value = runner()
        //從新取值後設置dirty確保不會再從新取值，tirgger事件會將dirty變爲true
        dirty = false
      }
      // When computed effects are accessed in a parent effect, the parent
      // should track all the dependencies the computed property has tracked.
      // This should also apply for chained computed properties.
      
      //當在父級效果中訪問計算的效果時，父級應該跟蹤計算屬性跟蹤的全部依賴項。
      //這也應適用於連接的計算屬性。

      //跟蹤computed運行函數,這裏是爲了讓其餘effect可以追蹤到runner
      //這段有些繞，這個場景是這樣的
      //當其餘effect函數內部對computed返回的Ref有依賴時
      //computed返回的Ref類型是沒有攔截觸發track和trigger事件的
      //其餘effect內部會有對Ref的value的一個讀操做
      //經過這個讀操做跟蹤runner
      trackChildRun(runner)
      return value
    },
    set value(newValue: T) {
      setter(newValue)
    }
  }
}
複製代碼

這個Ref類型和Ref模塊中聲明的Ref類型有些不同，他沒有track事件和trigger事件，computed是經過get和set函數來肯定value的值的，但它的getter又是一個effect函數，內部有一個dirty變量判斷是否有tirgger事件觸發computed調用，若是事件發生，computed不會調用而是把dirty變爲true，訪問這個Ref值就會調用effect函數並將dirty變爲false。

若是其餘effect內部使用了這個computed返回的Ref類型怎麼辦呢？如何監聽這個Ref值的改變？computed模塊中提供了一種解決方法，讀取調用棧。試想這樣一個場景，父effect調用了，內部使用了computed返回的Ref，這時發生了讀操做Ref的讀操做會調用trackChildRun

function trackChildRun(childRunner: ReactiveEffect) {
  //父級運行函數，也就是剛被推入activeReactiveEffectStack的effect函數(effect模塊中)
  //把它當作一個其餘運行的effect
  const parentRunner =
    activeReactiveEffectStack[activeReactiveEffectStack.length - 1]
  if (parentRunner) {
    //遍歷childRunner的依賴數組，childRunner也是effect函數，他在運行時也有一個依賴數組
    for (let i = 0; i < childRunner.deps.length; i++) {
      //獲取依賴數組中的effect依賴(Set結構)，這個引用的終點是響應式對象的key鍵的effect依賴集合
      const dep = childRunner.deps[i]
      //若是依賴中不存在父effect
      if (!dep.has(parentRunner)) {
        //將父effect加入dep集合
        dep.add(parentRunner)
        //將dep推入父effect的依賴數組
        parentRunner.deps.push(dep)
      }
    }
  }
}

複製代碼

trackChildRun會將子Effect的依賴加入父Effect的依賴，這樣在子Effect的依賴觸發trigger事件時，子effect不會調用，但會把dirty變爲true，父effect會調用，父effect內部對Ref值進行讀操做，這時子effect調用將內部value改成新值。這樣父effect就不會錯過子effect的trigger事件了。