vue通过effect栈解决嵌套副作用依赖收集错乱问题：每次进入新effect将其入栈并设为activeeffect，执行完后出栈恢复上层effect，确保track时绑定正确层级的effect，支撑组件嵌套渲染、分支切换和精准cleanup。

Vue.js 的响应式系统允许副作用函数（effect）嵌套执行，这在组件嵌套渲染时天然发生——比如父组件的 render 是一个 effect，它内部调用子组件 render，就构成了 effect 嵌套。但原始设计若仅靠单个全局 activeEffect 变量，会导致依赖收集错乱：内层 effect 覆盖外层的 activeEffect 后无法恢复，造成更新触发错误（例如修改 obj.foo 却执行了本该只响应 obj.bar 的内层 effect）。

effect 栈确保嵌套层级正确隔离

Vue 通过维护一个 effectStack（副作用函数栈）解决该问题：

• 每次进入新 effect 时，将其推入栈顶，并设为当前 activeEffect
• effect 执行完毕后，从栈中弹出，并将 activeEffect 恢复为上一层 effect
• 这样每个 track 收集依赖时，绑定的是当前栈顶的 effect，而非被覆盖的旧 effect
• 依赖关系严格对应“谁读了谁”，避免跨层级污染

嵌套 effect 的典型场景就是组件树渲染

组件结构决定 effect 层级，不是人为“写嵌套”才触发：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

• <app></app> 渲染时执行一个 effect，activeEffect 指向 App 的渲染函数
• App 中使用 <header></header>，Header 的 render 在 App effect 内部执行，自动进入新 effect
• Header 再用 <logo></logo>，又一层 effect 入栈
• 每一层都独立 track 自己读取的响应式字段，互不干扰

手动嵌套 effect 需谨慎，多数情况应避免

除非明确需要隔离依赖或控制调度逻辑，否则不建议在业务代码中主动嵌套 effect：

• 容易引发意料外的依赖丢失或重复执行
• 调试困难，栈深度增加导致追踪路径变长
• 组合式 API 中更推荐用 computed、watch 或拆分逻辑，而非手动 effect 嵌套
• 若必须嵌套（如封装自定义 hook 内部需局部响应），确保外层 effect 不意外读取内层依赖的字段

依赖清理与分支切换也依赖栈机制

effect 栈不仅服务嵌套，还支撑分支切换和 cleanup 的准确性：

• 当模板中存在条件渲染（如 v-if），不同分支读取的字段不同
• 每次 effect 重新执行前，先用 cleanup 清掉它上次收集的所有依赖
• 而 cleanup 能精准定位“这个 effect 曾经关联过哪些字段”，正因为它在栈中是唯一可识别的实体
• 没有栈，cleanup 就无法区分哪个 effect 该清哪部分依赖，遗留依赖就会导致无效更新

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！