Vue3讀源碼系列(七)：effectScope API實現原理
theme: channing-cyan
vue3新增了effectScope相關的API，其官方的描述是創建一個 effect 作用域，可以捕獲其中所創建的響應式副作用 (即計算屬性和偵聽器)，這樣捕獲到的副作用可以一起處理。並給出了示例： ```ts const scope = effectScope()
scope.run(() => { const doubled = computed(() => counter.value * 2)
watch(doubled, () => console.log(doubled.value))
watchEffect(() => console.log('Count: ', doubled.value)) })
// 處理掉當前作用域內的所有 effect scope.stop() ``` 我們就從這個示例入手看看具體的源碼實現：
effectScope
ts
// packages/reactivity/src/effectScope.ts
export function effectScope(detached?: boolean) {
// 返回EffectScope實例
return new EffectScope(detached)
}
EffectScope
```ts export class EffectScope { / * @internal */ private _active = true / * @internal / effects: ReactiveEffect[] = [] / * @internal / cleanups: (() => void)[] = []
/ * only assigned by undetached scope * @internal */ parent: EffectScope | undefined / * record undetached scopes * @internal / scopes: EffectScope[] | undefined / * track a child scope's index in its parent's scopes array for optimized * // index作用：在父作用域數組中跟蹤子作用域範圍索引以進行優化。 * removal * @internal / private index: number | undefined
constructor(public detached = false) { // 記錄當前scope為parent scope this.parent = activeEffectScope if (!detached && activeEffectScope) { this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push( this ) - 1 } }
get active() { return this._active }
runcannot run an inactive effect scope.)
}
}
/* * This should only be called on non-detached scopes * 必須在非分離的作用域上調用 * @internal / on() { activeEffectScope = this }
/*
* This should only be called on non-detached scopes
* @internal
/
off() {
activeEffectScope = this.parent
}
// stop方法
stop(fromParent?: boolean) {
if (this._active) {
let i, l
// stop effects
for (i = 0, l = this.effects.length; i < l; i++) {
this.effects[i].stop()
}
// 執行所有的cleanups
for (i = 0, l = this.cleanups.length; i < l; i++) {
this.cleanupsi
}
// 遞歸停止所有的子作用域
if (this.scopes) {
for (i = 0, l = this.scopes.length; i < l; i++) {
this.scopes[i].stop(true)
}
}
// nested scope, dereference from parent to avoid memory leaks
if (!this.detached && this.parent && !fromParent) {
// optimized O(1) removal
const last = this.parent.scopes!.pop()
if (last && last !== this) {
this.parent.scopes![this.index!] = last
last.index = this.index!
}
}
this.parent = undefined
this._active = false
}
}
}
在執行scope.run的時候會將this賦值到全局的activeEffectScope變量，然後執行傳入函數。對於computed、watch、watchEffect（watchEffect是調用doWatch實現的，與watch實現響應式綁定的方式相同）這些API都會創建ReactiveEffect實例來建立響應式關係，而收集對應的響應式副作用就發生在ReactiveEffect創建的時候，我們來看一下ReactiveEffect的構造函數：ts
// ReactiveEffect的構造函數
constructor(
public fn: () => T,
public scheduler: EffectScheduler | null = null,
scope?: EffectScope
) {
// effect實例默認會被記錄到指定scope中
// 如果沒有指定scope則會記錄到全局activeEffectScope中
recordEffectScope(this, scope)
}
// recordEffectScope實現
export function recordEffectScope(
effect: ReactiveEffect,
// scope默認值為activeEffectScope
scope: EffectScope | undefined = activeEffectScope
) {
if (scope && scope.active) {
scope.effects.push(effect)
}
}
```
可以看到如果我們沒有傳入scope參數，那麼在執行recordEffectScope時就會有一個默認的參數為activeEffectScope，這個值不正是我們scope.run的時候賦值的嗎！所以新創建的effect會被放到activeEffectScope.effects中，這就是響應式副作用的收集過程。
那麼對於一起處理就比較簡單了，只需要處理scope.effects即可
組件的scope
日常開發中其實並不需要我們關心組件副作用的收集和清除，因為這些操作是已經內置好的，我們來看一下源碼中是怎麼做的
組件實例中的scope
在組件實例創建的時候就已經new了一個屬於自已的scope對象了：
ts
const instance: ComponentInternalInstance = {
...
// 初始化scope
scope: new EffectScope(true /* detached */),
...
}
在我們執行setup之前，會調用setCurrentInstance，他會調用instance.scope.on，那麼就會將activeEffectScope賦值為instance.scope，那麼在setup中註冊的computed、watch等就都會被收集到instance.scope.effects
ts
function setupStatefulComponent(
instance: ComponentInternalInstance,
isSSR: boolean
) {
// 組件對象
const Component = instance.type as ComponentOptions
...
// 2. call setup()
const { setup } = Component
if (setup) {
// 創建setupContext
const setupContext = (instance.setupContext =
// setup參數個數判斷 大於一個參數創建setupContext
setup.length > 1 ? createSetupContext(instance) : null)
// instance賦值給currentInstance
// 設置當前實例為instance 為了在setup中可以通過getCurrentInstance獲取到當前實例
// 同時開啟instance.scope.on()
setCurrentInstance(instance)
// 暫停tracking 暫停收集副作用函數
pauseTracking()
// 執行setup
const setupResult = callWithErrorHandling(
setup,
instance,
ErrorCodes.SETUP_FUNCTION,
// setup參數
[__DEV__ ? shallowReadonly(instance.props) : instance.props, setupContext]
)
// 重新開啟副作用收集
resetTracking()
// currentInstance置為空
// activeEffectScope賦值為instance.scope.parent
// 同時instance.scope.off()
unsetCurrentInstance()
...
} else {
finishComponentSetup(instance, isSSR)
}
}
對於選項式API的收集是同樣的操作：
ts
// support for 2.x options
if (__FEATURE_OPTIONS_API__ && !(__COMPAT__ && skipOptions)) {
setCurrentInstance(instance)
pauseTracking()
// 處理options API
applyOptions(instance)
resetTracking()
unsetCurrentInstance()
}
完成了收集那麼對於清理就只需要在組件卸載的時候執行stop方法即可：
```ts
// packages/runtime-core/src/renderer.ts
const unmountComponent = (
instance: ComponentInternalInstance,
parentSuspense: SuspenseBoundary | null,
doRemove?: boolean
) => {
if (DEV && instance.type.__hmrId) {
unregisterHMR(instance)
}
const { bum, scope, update, subTree, um } = instance ... // stop effects in component scope // 副作用清除 scope.stop() ... } ```