深入理解Vue3裡的EffectScope
Vue 3.2 版本引入瞭新的 Effect scope API,使用 effectScope 創建一個 effect 作用域,可以捕獲其中所創建的響應式副作用 (即計算屬性和偵聽器),這樣捕獲到的副作用可以一起處理。使用 getCurrentScope 返回當前活躍的 effect 作用域。使用 onScopeDispose 在當前活躍的 effect 作用域上註冊一個處理回調函數。當相關的 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 stopWatch1 = watchEffect(() => { console.log(`counter: ${counter.value}`) }) disposables.push(stopWatch1) const stopWatch2 = watch(doubled, () => { console.log(doubled.value) }) disposables.push(stopWatch2)
上面的代碼中,我們寫瞭一共三個 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 又有影響,其他 component2 組件調用有問題。
到此這篇關於深入理解Vue3裡的EffectScope的文章就介紹到這瞭,更多相關Vue3 EffectScope內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue3 中 watch 與 watchEffect 區別及用法小結
- Vue3初始化如何調用函數
- vue3.0組合式api的使用小結
- vue3 文檔梳理快速入門
- vue3怎麼數據監聽watch/watchEffect