Vue 3.2 版本引入了新的 Effect scope API，使用 effectScope 建立一個 effect 作用域，可以捕獲其中所建立的響應式副作用 (即計算屬性和偵聽器)，這樣捕獲的副作用可以一起處理。 getCurrentScope 方法可用於取得目前活躍的 effect 作用域。在目前啟動的 effect 作用域中註冊一個處理回呼函數，使用 onScopeDispose。當相關的 effect 作用域停止時會呼叫這個回呼函數。
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()在 Vue 的 setup 中，回應會在開始初始化的時候被收集，在實例被卸載的時候，回應就會自動的被取消追蹤了，這時一個很方便的特性。
但是，當我們在元件外使用或編寫一個獨立的套件時，這會變得非常麻煩。在單獨的文件中，如何取消 computed和watch 的響應式依賴？
範例程式碼，參考連結
const disposables = []
const counter = ref(0)
const doubled = computed(() => counter.value * 2)
disposables.push(() => stop(doubled.effect))
const stopWatch2 = watchEffect(() => {
console.log(`counter: ${counter.value}`)
})
disposables.push(stopWatch2)
const stopWatch3 = watch(doubled, () => {
console.log(doubled.value)
})
disposables.push(stopWatch3)上面的程式碼中，我們寫了一共三個computed & watch 的回應式依賴，把這些回應式依賴的stopHandle 都存到一個陣列中，意思是我們需要維護這個數組，這樣將來在需要的時候，就可以像下面這樣，直接把所有的回應都停掉：
disposables.forEach((f) => f()) disposables = []
特別是在處理一些複雜的組合式函數程式碼時，手動收集所有響應式依賴是很繁瑣的。如果您無法存取在組合式函數中建立的響應式依賴，收集它們可能很容易被遺忘，這可能導致記憶體洩漏和意外行為。
該特性就是試圖將元件的 setup() 響應式依賴收集和處理功能抽象化為更通用的 API，該 API 可以在元件模型之外重複使用。
它還提供了從組件的 setup() 範圍或使用者定義的範圍創建「分離」 effects 的功能。
這個功能解決了什麼問題？
// global shared reactive state
let foo
function useFoo() {
if (!foo) { // lazy initialization
foo = ref()
watch(foo, ...) // <- this is stopped when component that created it is unmounted
// make some http calls etc
}
return foo
}
component1 = {
setup() {
useFoo() // lazily initialize
}
}
component2 = {
setup() {
useFoo() // lazily initialize
}
}我有一個在多個元件之間共享功能的組合函數，問題是當卸載第一個調用的元件時 component1 停止 useFoo 響應式依賴。由於持續對全域變數 foo 的影響會影響其他元件的調用，因此需要停止這種影響。
以上是Vue3裡的EffectScope怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
