effect API 底层由 Vue 3 响应式核心驱动，通过 ReactiveEffect 实例、activeEffect 全局标记、track 依赖收集和 trigger 更新调度协同工作，实现响应式副作用管理。
effect API 的底层调用不是直接暴露给用户的“黑盒”，而是由 Vue 3 响应式核心（@vue/reactivity）中的一套协作机制驱动的。 它不靠单个函数调用完成，而是一系列关键对象和流程协同工作的结果：从副作用函数注册、依赖自动收集，到变化时调度执行。
ReactiveEffect 类封装副作用逻辑
当你调用 effect(() => {...})，实际是 new 了一个 ReactiveEffect 实例。这个类是 effect 的真正执行主体，它内部持有：
- 要运行的副作用函数（
fn） - 当前已收集的依赖列表（
deps: Dep[]） - 可选的调度器（
scheduler），控制何时/如何重新执行 - 一个
run()方法，负责设置全局activeEffect、执行fn、并清理环境
activeEffect 全局标记触发依赖收集
Vue 使用一个全局变量 activeEffect 来标记“此刻正在执行哪个副作用”。在 ReactiveEffect.run() 开始时，它会把自身赋值给 activeEffect；执行完后清空。这个变量是依赖收集的关键桥梁：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 当响应式对象（如
reactive({ count: 0 })）的属性被读取（obj.count），Proxy 的get拦截器会调用track(target, key) -
track会检查是否存在activeEffect，有则将它添加进该target.key对应的依赖集合（deps数组）中
trigger 触发更新与 scheduler 调度执行
当响应式数据被修改（obj.count = 2），Proxy 的 set 拦截器会调用 trigger(target, key)：
立即学习“前端免费学习笔记（深入）”；
-
trigger查找target.key对应的所有deps（即之前收集的 ReactiveEffect 实例） - 对每个 effect，默认直接调用
effect.run()；但若有scheduler配置，则交由调度器统一处理（例如推入 Promise 微任务队列，实现批量异步更新） - 组件渲染、
watchEffect、computed的更新，都复用这一套 trigger → scheduler → run 流程
effect 不是孤立调用，而是嵌入整个响应式链条
你写的 effect(() => console.log(state.count)) 看似简单，背后完整链路是：
- 创建 ReactiveEffect 实例 →
run()启动 →activeEffect被设为当前 effect - 执行函数体 → 访问
state.count→get→track→ 把当前 effect 记入state.count的依赖池 - 后续
state.count++→set→trigger→ 找到该依赖池 → 调度重新run
