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 方法说明

三、高级特性

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 timer
  
  scope.run(() => {
    watchEffect(() => {
      timer = setInterval(() => {
        count.value++
      }, 1000)
    })
  })
  
  return {
    count,
    stop: () => {
      clearInterval(timer)
      scope.stop()
    }
  }
}

五、性能优化建议

1. 合理划分作用域：按功能模块划分

2. 及时清理：组件卸载务必调用 stop()

3. 慎用独立作用域：确保手动管理生命周期

4. 避免嵌套过深：一般不超过3层