Vue3原始碼解析--收集的依賴是什麼？怎麼收集的？什麼時候收集的？

蓝柯柯發表於2024-05-26
Vue原始碼

從Vue開始較大範圍在前端應用開始，關於Vue一些基礎知識的討論和麵試問題就在開發圈子裡基本上就跟前幾年的股票和基金一樣，樓下襬攤賣醬香餅的阿姨都能說上幾句那種。找過前端開發工作或者正在找開發工作的前端都知道，面試官基本上都有那麼幾個常問的問題，而網上呢也有那麼一套可以用來背誦的“八股文”，自己懂多少沒有關係，應付面試官還是夠的，可以算是屢試不爽吧。

背誦面試八股文無可厚非的，可以說是每一個找工作的人都幹過和必須乾的事情，因為我們都要工作，都要恰飯。只有恰上飯，才能去談些偉大的理想。背“八股文”本是一種捷徑，尤其是本身對一門技術不是特別瞭解的開發者，就是那種剛剛能使用它那種。

在眾多關於Vue的面試“八股文”中，今天講的是其中最常問的一個--Vue中的依賴收集。本文也將從程式碼層面，講清楚關於依賴收集的幾個問題。

  • 收集的依賴是什麼？（what）
  • 怎麼收集的依賴？ （how）
  • 什麼時候收集？ (when)

至於為什麼要收集依賴(why)，現在就可以先告訴答案。收集依賴，其核心作用是在資料發生變化的時候可以做出相應的動作，比如重新整理檢視，為了執行這一動作，我們就得知道是誰在什麼時候發生了變化，所以我們要收集依賴。

下面我們結合程式碼，儘可能通俗的講解關於上述的三個問題：

在搞清楚依賴收集之前，先把原始碼中幾個概念性的東西說明一下，建議下載Vue3原始碼進行對照著看：

  • Dep: 本質上是一個Map例項，同時在map例項上繫結一個celanup函式和一個computed屬性。

  • ReactiveEffect: 相當於2.x版本中的Watcher類, 裡頭有一個deps陣列，用來存dep, 每個例項裡面都有一個track_id用來標識唯一性。

  • effect函式： 裡頭例項化一個ReactiveEffect物件，同時繫結一些options, 返回值是一個runner,實際上是對ReactiveEffect物件行為的一種業務封裝。

下面以一行簡單的程式碼開始關於依賴收集的探索。

const num = ref(1);

// packages/reactivity/src/ref.ts
export function ref<T>(value: T): Ref<UnwrapRef<T>>
export function ref<T = any>(): Ref<T | undefined>
export function ref(value?: unknown) {
  return createRef(value, false)
}

ref函式主要是對createRef做了一個函式包裝，主要內容看到createRef函式。

// packages/reactivity/src/ref.ts
function createRef(rawValue: unknown, shallow: boolean) {
  if (isRef(rawValue)) {
    return rawValue
  }
  return new RefImpl(rawValue, shallow)
}

createRef函式在這裡對原始資料rawValue做了一個判斷，如果資料本身就是響應式資料了，就直接返回它本身，如果不是，就返回一個例項化的RefImpl物件。

// packages/reactivity/src/ref.ts
class RefImpl<T> {
  private _value: T
  private _rawValue: T

  public dep?: Dep = undefined
  public readonly __v_isRef = true

  constructor(
    value: T,
    public readonly __v_isShallow: boolean,
  ) {
    this._rawValue = __v_isShallow ? value : toRaw(value)
    this._value = __v_isShallow ? value : toReactive(value)
  }

  get value() {
    trackRefValue(this)
    return this._value
  }

  set value(newVal) {
    const useDirectValue =
      this.__v_isShallow || isShallow(newVal) || isReadonly(newVal)
    newVal = useDirectValue ? newVal : toRaw(newVal)
    if (hasChanged(newVal, this._rawValue)) {
      this._rawValue = newVal
      this._value = useDirectValue ? newVal : toReactive(newVal)
      triggerRefValue(this, DirtyLevels.Dirty, newVal)
    }
  }
}

重點來了，RefImple類裡頭，才是真正包含了從原始資料變成響應式資料，以及收集依賴的邏輯。在一個refImpl例項中，裡面有一個dep物件，初始值是undefined， 這個dep會這trackRefValue函式執行的過程中被賦值。

下面程式碼從17-21(get value())行，就是依賴收集的過程：當一個ref型響應式資料透過.value訪問時，會觸發RefImpl例項中的getter。它會首先執行一個trackValue函式，然後再返回_value值，所以接下來重點看關注trackValue函式，所以依賴是在資料被訪問的時候觸發的。

// packages/reactivity/src/ref.ts
export function trackRefValue(ref: RefBase<any>) {
  if (shouldTrack && activeEffect) {
    ref = toRaw(ref)
    trackEffect(
      activeEffect,
      (ref.dep ??= createDep(
        () => (ref.dep = undefined),
        ref instanceof ComputedRefImpl ? ref : undefined,
      )),
      __DEV__
        ? {
            target: ref,
            type: TrackOpTypes.GET,
            key: 'value',
          }
        : void 0,
    )
  }
}u

trackRefValue函式中有兩個變數，shouldTrack和activeEffect，暫時我們不去理會它們，只要知道shouldTrack是一個布林值，activeEffect是一個RectiveEffect例項。

在shouldTrack值為true且activeEffect有值的情況下，首先會將ref轉成原始值，然後再執行trackEffect函式。

在執行trackEffect函式的中，第一個是activeEffect, 在任意時刻它在全域性是具有唯一性的；第二個是ref.dep, 其中給ref.dep的賦值函式createDep返回一個Dep例項，前面說過的，本質是個map; 第三個函式是個物件，是關於開發環境下debug的一些配置。

在這裡，我們可以看到，之前說個的ref例項中原來是undefined的ref.dep賦值，就在此處。

// packages/reactivity/src/effect.ts
export function trackEffect(
  effect: ReactiveEffect,
  dep: Dep,
  debuggerEventExtraInfo?: DebuggerEventExtraInfo,
) {
  if (dep.get(effect) !== effect._trackId) {
    dep.set(effect, effect._trackId)
    const oldDep = effect.deps[effect._depsLength]
    if (oldDep !== dep) {
      if (oldDep) {
        cleanupDepEffect(oldDep, effect)
      }
      effect.deps[effect._depsLength++] = dep
    } else {
      effect._depsLength++
    }
    if (__DEV__) {
      effect.onTrack?.(extend({ effect }, debuggerEventExtraInfo!))
    }
  }
}

trackEffect函式絕對是依賴收集重頭戲中的重頭戲。

首先上來就是一個判斷，dep, 也就是ref中的dep，本質是個map，判斷裡面是否存在對應的effect, 如果沒有，就執行接下來的操作。

dep將effect也就是activeEffect作為鍵，其_trackId作為值新增到dep，所以我們說的收集的依賴指的就是effect物件。同時我們得到了一個關於dep和effect之間的第一關係，即一個dep可以對應多個effect。

接著，將effects例項中deps陣列中最後一個值取出來與當前的dep值進行比對，看是否是同一個值如果不是同一個值，而且oldDep是有值的，那麼就執行cleanupDepEffect操作。如果oldDep為空值，就跳過這一步，直接往effect.deps中新增dep。因此，我們在這裡得到了關於dep和effect第二個結論，一個effect可以對應多個dep。

程式碼還有一部分，接著往下看，在oldDep不等於當前dep的時候，直接對effec_depsLength進行加操作，也就是說，effect.deps值沒有變，但是_depsLength值卻超出了deps陣列邊界的情況，這也就是為什麼上面要判斷oldDep是否存在的原因。

由上面上面兩個結論我們可以得出，一個dep中可以對應多個effect, 一個effect也可以對應多個dep, 因此dep和effect的關係是多對多的關係。

總結

  • 收集的依賴是什麼？（what）

我們常說的收集的依賴是effect物件

  • 怎麼收集的依賴？ （how）

判斷當前資料dep中有沒有activeEffct, 沒有就加進去。把大象關進冰箱裡要幾步！！！

  • 什麼時候收集？ (when)

在資料被訪問時，觸發getter，進行依賴收集

相關文章