Vue 中 effectScope() 的全面解析与实战应用
一、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层