從Vue開始較大範圍在前端應用開始，關於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，進行依賴收集
