Vue3里的EffectScope怎么使用

本篇內(nèi)容介紹了“Vue3里的EffectScope怎么使用”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

Vue 3.2 版本引入了新的 Effect scope API，使用 effectScope 創(chuàng)建一個 effect 作用域，可以捕獲其中所創(chuàng)建的響應(yīng)式副作用 (即計算屬性和偵聽器)，這樣捕獲到的副作用可以一起處理。使用 getCurrentScope 返回當(dāng)前活躍的 effect 作用域。使用 onScopeDispose 在當(dāng)前活躍的 effect 作用域上注冊一個處理回調(diào)函數(shù)。當(dāng)相關(guān)的 effect 作用域停止時會調(diào)用這個回調(diào)函數(shù)。

const scope = effectScope()

scope.run(() => {
  const doubled = computed(() => counter.value * 2)

  watch(doubled, () => console.log(doubled.value))

  watchEffect(() => console.log('Count: ', doubled.value))
})

// 處理掉當(dāng)前作用域內(nèi)的所有 effect
scope.stop()

在 Vue 的 setup 中，響應(yīng)會在開始初始化的時候被收集，在實例被卸載的時候，響應(yīng)就會自動的被取消追蹤了，這時一個很方便的特性。

但是，當(dāng)我們在組件外使用或者編寫一個獨立的包時，這會變得非常麻煩。當(dāng)在單獨的文件中，我們該如何停止 computed & watch 的響應(yīng)式依賴呢？

示例代碼，參考鏈接

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 的響應(yīng)式依賴，把這些響應(yīng)式依賴的 stopHandle 都存到一個數(shù)組中，意思是我們需要維護(hù)這個數(shù)組，這樣將來在需要的時候，就可以像下面這樣，直接把所有的響應(yīng)都停掉：

disposables.forEach((f) => f())
disposables = []

尤其是當(dāng)我們有一些長而復(fù)雜的組合式函數(shù)代碼時，手動收集所有響應(yīng)式依賴是很費力的。也很容易忘記收集它們（或者您無法訪問在組合式函數(shù)中創(chuàng)建的響應(yīng)式依賴），這可能會導(dǎo)致內(nèi)存泄漏和意外行為。

該特性就是試圖將組件的 setup() 響應(yīng)式依賴收集和處理功能抽象為更通用的 API，該 API 可以在組件模型之外復(fù)用。

它還提供了從組件的 setup() 范圍或用戶定義的范圍創(chuàng)建“分離” 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
    }
}

我有一個在多個組件之間共享功能的組合式函數(shù)，問題是當(dāng)卸載第一個調(diào)用的組件時 component1 停止 useFoo 響應(yīng)式依賴。因為如果不停止對全局變量 foo 又有影響，其他 component2 組件調(diào)用有問題。

“Vue3里的EffectScope怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！