前言
參考代碼版本：vue 3.2.37
官方文檔：https://vuejs.org/
關于為什么要有effectScope可以參考RFC
使用示例
effectScope可以對內部的響應式對象的副作用effect進行統(tǒng)一管理。
const counter = ref(1)
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接收一個boolean值，如果傳true代表游離模式萝勤，那么創(chuàng)建的scope不會被父scope收集，通俗來講呐伞，如果是游離模式敌卓，那么scope之間是不存在父子關系的，每一個scope都是獨立的伶氢。
export function effectScope(detached?: boolean) {
return new EffectScope(detached)
}
effectScope返回一個EffectScope實例趟径。
EffectScope
export class EffectScope {
active = true
effects: ReactiveEffect[] = []
cleanups: (() => void)[] = []
parent: EffectScope | undefined
scopes: EffectScope[] | undefined
/**
* track a child scope's index in its parent's scopes array for optimized
* removal
*/
private index: number | undefined
constructor(detached = false) {
if (!detached && activeEffectScope) {
this.parent = activeEffectScope
this.index =
(activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
this
) - 1
}
}
run<T>(fn: () => T): T | undefined {
if (this.active) {
try {
activeEffectScope = this
return fn()
} finally {
activeEffectScope = this.parent
}
} else if (__DEV__) {
warn(`cannot run an inactive effect scope.`)
}
}
on() {
activeEffectScope = this
}
off() {
activeEffectScope = this.parent
}
stop(fromParent?: boolean) {
if (this.active) {
let i, l
for (i = 0, l = this.effects.length; i < l; i++) {
this.effects[i].stop()
}
for (i = 0, l = this.cleanups.length; i < l; i++) {
this.cleanups[i]()
}
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.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.active = false
}
}
}
constructor
EffectScope構造器接收一個參數(shù)：detached，默認值為false癣防，代表EffectScope是否是游離狀態(tài)蜗巧。
constructor(detached = false) {
if (!detached && activeEffectScope) {
this.parent = activeEffectScope
this.index =
(activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
this
) - 1
}
}
如果detached為false，并且存在activeEffectScope（activeEffectScope是個全局變量）的情況蕾盯，會將activeEffectScope賦值給this.parent幕屹，同時會將當前EffectScope實例放入activeEffectScope.scopes中，并將activeEffectScope.scopes最后一個索引賦值給當前EffectScope實例的index屬性。這樣就可以通過this.index來獲取EffectScope實例在父scope中的索引位置望拖。
run
run方法可以接收一個函數(shù)參數(shù)渺尘。
run<T>(fn: () => T): T | undefined {
if (this.active) {
try {
activeEffectScope = this
return fn()
} finally {
activeEffectScope = this.parent
}
} else if (__DEV__) {
warn(`cannot run an inactive effect scope.`)
}
}
run方法會首先對this.active進行判斷，如果this.active為true说敏，也就是EffectScope處于激活狀態(tài)鸥跟，那么會將this賦給activeEffectScope，然后執(zhí)行fn盔沫，并返回其執(zhí)行結果锌雀。當fn執(zhí)行完畢后，將activeEffectScope改為this.parent迅诬。
on
on() {
activeEffectScope = this
}
on方法會將activeEffectScope指向當前EffectScope實例腋逆。
off
off() {
activeEffectScope = this.parent
}
off方法會將activeEffectScope指向當前EffectScope實例的父scope。
stop
stop函數(shù)的作用是清除scope內的所有的響應式效果侈贷，包括子scope惩歉。stop接收一個boolean類型的fromParent參數(shù)，如果fromParent為true俏蛮，stop將不會刪除在父scope中的引用撑蚌。
stop(fromParent?: boolean) {
if (this.active) {
let i, l
// 調用ReactiveEffect.prototype.stop，清除scope內所有響應式效果
for (i = 0, l = this.effects.length; i < l; i++) {
this.effects[i].stop()
}
// 觸發(fā)scope銷毀時的監(jiān)聽函數(shù)
for (i = 0, l = this.cleanups.length; i < l; i++) {
this.cleanups[i]()
}
// 銷毀子scope
if (this.scopes) {
for (i = 0, l = this.scopes.length; i < l; i++) {
this.scopes[i].stop(true)
}
}
// 嵌套范圍搏屑，從父級取消引用以避免內存泄漏
if (this.parent && !fromParent) {
// 獲取父scope的中最后一個scope
const last = this.parent.scopes!.pop()
// last不是當前的scope
if (last && last !== this) {
// 將last放在當前scope在parent.scopes中的索引位置
this.parent.scopes![this.index!] = last
// last.index改為this.index
last.index = this.index!
}
}
// 修改scope的激活狀態(tài)
this.active = false
}
}
stop中的所有操作都要建立在scope處于激活狀態(tài)的基礎上争涌。首先遍歷this.effects執(zhí)行元素的stop方法。
for (i = 0, l = this.effects.length; i < l; i++) {
this.effects[i].stop()
}
scope.effects存儲的是在run過程中獲取到的ReactiveEffect實例辣恋，這些ReactiveEffect實例會通過一個recordEffectScope方法被添加到scope.effects中亮垫。
export function recordEffectScope(
effect: ReactiveEffect,
scope: EffectScope | undefined = activeEffectScope
) {
if (scope && scope.active) {
scope.effects.push(effect)
}
}
當遍歷完scope.effects或，會遍歷scope.cleanups屬性伟骨。
for (i = 0, l = this.cleanups.length; i < l; i++) {
this.cleanups[i]()
}
scope.cleanups中保存的是通過onScopeDispose添加的scope銷毀監(jiān)聽函數(shù)饮潦。
export function onScopeDispose(fn: () => void) {
if (activeEffectScope) {
activeEffectScope.cleanups.push(fn)
} else if (__DEV__) {
warn(
`onScopeDispose() is called when there is no active effect scope` +
` to be associated with.`
)
}
}
如果當前scope存在scopes屬性，意味著當前scope存在子scope携狭，所以需要將所有子scope也進行銷毀继蜡。
if (this.scopes) {
for (i = 0, l = this.scopes.length; i < l; i++) {
this.scopes[i].stop(true)
}
}
如果當前scope存在parent的話，需要將scope從其parent中移除逛腿。
if (this.parent && !fromParent) {
// 獲取父scope的中最后一個scope
const last = this.parent.scopes!.pop()
// last不是當前的scope
if (last && last !== this) {
// 將last放在當前scope在parent.scopes中的索引位置
this.parent.scopes![this.index!] = last
// last.index改為this.index
last.index = this.index!
}
}
這里的移除過邏輯是稀并，先獲取當前scope的父scope中的所有子scope，然后取出最后一個scope单默，這里用last代表（注意last不一定和當前scope相同）碘举，如果last和當前scope不同的話，需要讓last替換當前scope雕凹，這樣我們就把當前scope從其父scope中移除了殴俱。這里僅僅替換是不夠的，因為last.index此時還是之前父scope的最后一個索引枚抵，所以還需要把last.index改為當前scope在其父scope.scopes中的位置线欲。這樣就完全移除了scope。
最后汽摹，需要把scope的激活狀態(tài)改為false李丰。
this.active = false
getCurrentScope
getCurrentScope可以獲取當前處于活躍狀態(tài)的EffectScope。這里處于活躍狀態(tài)的EffectScope指得是當前執(zhí)行環(huán)境在所處的那個EffectScope逼泣。
export function getCurrentScope() {
return activeEffectScope
}
