Vue.js 通过 effect 栈机制解决多级嵌套 Effect 的依赖收集问题：用 effectStack 替代全局 activeEffect，进入时 push、退出时 pop，track 时取栈顶 effect，确保各层依赖精准归属；配合 effectScope 实现作用域级统一清理。
Vue.js 响应式系统解决多级嵌套 Effect 的核心方法是引入 effect 栈（effectStack） 机制，替代单一的全局 activeEffect 变量，从而保证每一层 effect 都能独立、准确地收集依赖。
用栈管理当前激活的 effect
原始设计中，activeEffect 是一个全局变量，当内层 effect 执行时会覆盖外层值，导致外层无法完成依赖收集。多级嵌套下问题更明显：第三层 effect 执行后，第一、二层的上下文全部丢失。
解决方案是改用数组栈：
- 进入 effect 时，将当前 effect 推入栈顶：
effectStack.push(effect) - 设置
activeEffect = effectStack[effectStack.length - 1] - effect 执行完毕后，从栈中弹出：
effectStack.pop() - 每次
track()收集依赖时，都取栈顶 effect，而非全局变量
确保依赖归属层级正确
每个 effect 在创建时并不立即绑定数据依赖，而是在其执行过程中、通过 getter 触发 track() 时，动态将自己加入对应响应式属性的依赖集合。由于栈结构的存在，哪怕嵌套五层，第 3 层读取 obj.count，也只会把第 3 层 effect 记入 count 的依赖列表，不会误挂到第 1 层或第 5 层。
立即学习“前端免费学习笔记（深入）”；
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
这使得：
- 修改
obj.foo→ 只触发直接读取它的那一层 effect - 组件嵌套渲染（如 A 渲染 B，B 渲染 C）→ 每层 render 函数各自形成独立 effect，更新互不干扰
-
computed内部 effect 被外层effect读取时，也能保持嵌套但隔离的依赖链
配合 effectScope 实现作用域级清理
栈解决了“收集”问题，而 effectScope() 解决“释放”问题。它为一组 effect 划定边界：
-
scope.run(() => { effect(() => {}); watch(...); })—— 所有 effect 自动归属该 scope -
scope.stop()—— 一次性停用并清理整个 scope 下所有 effect（包括其内部嵌套创建的 effect） - 组件卸载时自动调用当前 setup 隐式 scope 的
stop()，避免内存泄漏
即使存在深度嵌套 effect，只要它们在同一个 scope 内，就能被统一管理生命周期。
避免手动嵌套，优先使用声明式 API
虽然技术上支持多级嵌套 effect，但 Vue 官方不鼓励手动编写嵌套 effect，因为易出错且难以维护。实际开发中应：
- 用
watch/computed替代手写内层 effect - 把逻辑拆到组合式函数（composable）中，由 Vue 自动处理作用域归属
- 异步副作用（如请求）配合
onInvalidate处理竞态，而不是靠嵌套 effect 控制时机 - 条件分支中 effect 的创建，统一用
v-if或effectScope显式控制生命周期
