Vue 3.2 版本引入了新的 Effect scope API，使用 effectScope 創(chuàng)建一個(gè) effect 作用域，可以捕獲其中所創(chuàng)建的響應(yīng)式副作用 (即計(jì)算屬性和偵聽器)，這樣捕獲到的副作用可以一起處理。使用 getCurrentScope 返回當(dāng)前活躍的 effect 作用域。使用 onScopeDispose 在當(dāng)前活躍的 effect 作用域上注冊一個(gè)處理回調(diào)函數(shù)。當(dāng)相關(guān)的 effect 作用域停止時(shí)會調(diào)用這個(gè)回調(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)會在開始初始化的時(shí)候被收集，在實(shí)例被卸載的時(shí)候，響應(yīng)就會自動的被取消追蹤了，這時(shí)一個(gè)很方便的特性。

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

示例代碼，參考鏈接

const disposables = []

const counter = ref(0)
const doubled = computed(() => counter.value * 2)

disposables.push(() => stop(doubled.effect))

const stopWatch1 = watchEffect(() => {
  console.log(`counter: ${counter.value}`)
})

disposables.push(stopWatch1)

const stopWatch2 = watch(doubled, () => {
  console.log(doubled.value)
})

disposables.push(stopWatch2)

上面的代碼中，我們寫了一共三個(gè) computed & watch 的響應(yīng)式依賴，把這些響應(yīng)式依賴的 stopHandle 都存到一個(gè)數(shù)組中，意思是我們需要維護(hù)這個(gè)數(shù)組，這樣將來在需要的時(shí)候，就可以像下面這樣，直接把所有的響應(yīng)都停掉：

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

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

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

它還提供了從組件的 setup() 范圍或用戶定義的范圍創(chuàng)建“分離” effects 的功能。

這個(gè)功能解決了什么問題？

// 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
    }
}

我有一個(gè)在多個(gè)組件之間共享功能的組合式函數(shù)，問題是當(dāng)卸載第一個(gè)調(diào)用的組件時(shí) component1 停止 useFoo 響應(yīng)式依賴。因?yàn)槿绻煌Ｖ箤θ肿兞?foo 又有影響，其他 component2 組件調(diào)用有問題。

到此這篇關(guān)于深入理解Vue3里的EffectScope的文章就介紹到這了,更多相關(guān)Vue3 EffectScope內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論