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 项目组件依赖,从入口文件生成组件层级图,支持 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
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!









