vue3中的effectScope有什么作用，如何使用?如何自動清理

官網介紹：

創建一個 effect 作用域，可以捕獲其中所創建的響應式副作用 (即計算屬性和偵聽器)，這樣捕獲到的副作用可以一起處理。

作用

scope.run內可創建多個 像watch、watchEffect這種響應式函數，然后通過scope.stop()停止里面的所有響應式函數。

批量管理副作用： 可以把多個 effect 函數放到一個 effectScope 里，然后通過 effectScope.stop() 方法一次性停止所有這些副作用函數的運行。
組件卸載時清理副作用： 在組件卸載時，使用 effectScope 能夠更方便地清理所有相關的副作用，避免內存泄漏。
支持嵌套作用域

特點

• Vue 3.2+ 新增的 API
• 主要用于組織和批量管理 effect
• 特別適合在組件 setup 中使用
• 支持自動清理

簡單示例：

<script setup lang="ts">import { effectScope, reactive, watch, watchEffect } from 'vue';const scope = effectScope();const state = reactive({ count: 0 });scope.run(() => {// 這些 effect 都會被 scope 管理watch(() => state.count,(count) => {console.log('effectScope管理的watch監聽:', count);});watchEffect(() => {console.log('effectScope管理的watchEffect監聽', state.count);});});// 停止所有 effect，會將上面的watch和watchEffect都停止。const handleStop = () => {scope.stop();};// 自己調用watch監聽const singleWatch = watch(() => state.count,(count) => {console.log('單個監聽watch:', count);});// 停止自己創建的watch監聽const handleStopWatch = () => {singleWatch();};
</script><template><a-button @click="state.count++">count:{{ state.count }}</a-button><a-button @click="handleStop">停止</a-button><a-button @click="handleStopWatch">停止 watch</a-button>
</template><style scoped lang="less"></style>

自動清理示例

使用onScopeDispose實現組件卸載時自動，自動清理effectScope

import { effectScope, onScopeDispose } from 'vue'export default {setup() {const scope = effectScope()scope.run(() => {// 所有響應式邏輯const state = reactive({ /*...*/ })watch(/*...*/)computed(/*...*/)})onScopeDispose(() => {scope.stop() // 組件卸載時自動清理})return {}}
}