Vue3裡的EffectScope怎麼使用

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中文網其他相關文章！