vue依赖收集在准确性与性能间取舍，1.x细粒度（每插值一个watcher）、2.x中粒度（组件级watcher）、3.x灵活effect粒度，避免内存爆炸与更新失控。

Vue 的依赖收集不是“越细越好”，也不是“越粗越省”，而是在准确性和性能之间做了明确取舍。关键在于理解它把“谁”当作依赖——是 DOM 节点、表达式，还是组件？这个选择直接决定了响应式系统的内存开销和更新效率。

Vue 1.x 是细粒度：每个用到数据的地方都是独立依赖

在 Vue 1 中，{{ msg }}、v-text="msg"、甚至计算属性里的一次访问，都可能生成一个独立的 watcher。数据变化时，每个 watcher 单独触发更新。好处是精准，改哪就更新哪；坏处是内存占用高、依赖关系爆炸式增长，尤其模板复杂时，维护成本陡增。

• 一个组件内 {{ a }} 出现 5 次 → 可能产生 5 个 watcher
• 每个 watcher 都持有自己的更新函数、依赖链、缓存状态
• 数据变化时需遍历全部 watcher，逐个比对是否需要重算

Vue 2.x 升级为中等粒度：依赖单位是组件（Watcher 绑定渲染函数）

Vue 2 把整个组件的渲染过程封装成一个 watcher，只要组件内任意响应式数据被读取，就将这个 watcher 收集进对应属性的 dep 中。数据更新时，只通知该组件的 watcher，由它重新执行 render 函数，再通过虚拟 DOM diff 决定真实 DOM 怎么变。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 一个组件里 {{ a }}、{{ b }}、{{ a + b }} 全部共用同一个 watcher
• 每个响应式属性（如 a）只存一份 dep，里面是“哪些组件依赖我”的列表
• 牺牲少量重复计算（比如只改了 b，但 a 的 watcher 也执行了 render），换来内存大幅下降和逻辑清晰

Vue 3 进一步抽象：依赖单位是 effect（副作用函数）

Vue 3 用 effect 替代了 Vue 2 的 watcher，不再绑定组件生命周期，而是以函数为单位追踪依赖。一个组件的 setup()、一个 watch()、一个 computed()，都可以是一个独立 effect。它支持嵌套、手动清理、调度控制，粒度更灵活，但默认仍保持“组件级更新”的语义。

• computed(() => obj.a + obj.b) 是一个 effect，只依赖 a 和 b
• watch(() => obj.c, ...) 是另一个 effect，只关心 c
• 同一对象的不同属性可被不同 effect 独立订阅，避免“误通知”

为什么不能无限制细化？——依赖收集的本质约束

依赖收集要解决的核心问题是：“谁用了我？我变了，得告诉谁？” 如果不设边界，系统会面临两个现实瓶颈：

• 内存膨胀：每个 DOM 节点、每个插值、每个函数调用都建 watcher/effect，dep 列表指数级增长
• 更新不可控：数据一变，成百上千个微小依赖同时触发，浏览器来不及响应，卡顿明显
• 语义模糊：DOM 节点本身无状态，无法承载“重算逻辑”，必须靠上层（组件或 effect）来组织更新行为

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