一、effectScope 概述
1.1 什么是 effectScope
effectScope()?是 Vue 3.2 引入的核心 API，用于創建副作用作用域容器。它能夠將多個響應式副作用（如?watch、watchEffect?和?computed）組織在一起，實現統一的生命周期管理。
1.2 核心價值
批量管理：統一管理多個副作用
自動清理：避免手動逐個清理的繁瑣
嵌套結構：支持作用域層級關系
內存安全：防止副作用泄漏
二、基礎使用
2.1 基本語法
import { effectScope, watchEffect, ref } from 'vue'// 創建作用域實例
const scope = effectScope()// 在作用域內運行副作用
scope.run(() => {const count = ref(0)watchEffect(() => {console.log(`count值: ${count.value}`)})// 可添加更多副作用...
})// 停止所有副作用
scope.stop()2.2 方法說明
| 方法 | 描述 |
|---|---|
run(fn) | 在作用域內執行函數，注冊所有副作用 |
stop() | 停止作用域內所有副作用 |
三、高級特性
3.1 嵌套作用域
const parent = effectScope()parent.run(() => {const child = effectScope()child.run(() => {watchEffect(() => { /* 子作用域邏輯 */ })})// 父作用域停止會自動停止子作用域
})parent.stop()3.2 獨立作用域
const detached = effectScope(true) // 設置為獨立parent.run(() => {detached.run(() => {watchEffect(() => { /* 獨立邏輯 */ })})
})parent.stop() // 不會影響獨立作用域
detached.stop() // 需要手動停止四、實戰應用場景
4.1 組件封裝模式
// 封裝可復用的計時器邏輯
function useTimer() {const scope = effectScope()const count = ref(0)let timerscope.run(() => {watchEffect(() => {timer = setInterval(() => {count.value++}, 1000)})})return {count,stop: () => {clearInterval(timer)scope.stop()}}
}五、性能優化建議
合理劃分作用域：按功能模塊劃分
及時清理：組件卸載務必調用 stop()
慎用獨立作用域：確保手動管理生命周期
避免嵌套過深：一般不超過3層
)