Vue 2 和 Vue 3 在依赖收集与更新机制上的差异

核心差异

Vue 2 

• 每个组件实例对应一个 Watcher，组件内所有响应式数据的依赖都会被这个 Watcher 收集。当组件内任何响应式数据变化时，整个组件的 render 函数会重新执行，整个组件会重新渲染。

• 所有数据（包括未变化的数据）都会参与虚拟 DOM 的重新生成，之后通过 diff 算法对比新旧虚拟 DOM 树，只更新变化的部分。

但真实DOM 只会更新变化的部分：Vue2 会通过虚拟 DOM 的 diff 算法对比新旧 VNode 树，只找出真正变化的节点，并仅更新这些节点对应的 DOM。对于没有变化的数据所对应的 DOM 结构，不会产生实际的 DOM 操作。

Vue 3 

• 未变化的数据不会参与虚拟 DOM 的重新生成，只有受变化数据影响的部分才会重新生成对应的虚拟 DOM 节点。

Vue 3 如何优化的这个核心机制

1. 编译时优化：提前标记与静态提升

Vue 3 的模板编译器会在编译阶段对模板进行深度分析，将节点分为静态节点（永远不会变化）和动态节点（可能变化）。

虚拟 DOM diff 时，只需要关注带有补丁标记的动态节点，跳过无标记的静态节点，大幅减少对比成本。

(1). 静态节点提升：

对模板中不会变化的内容（如纯文本、无绑定的标签）标记为静态节点，编译时直接生成静态 VNode，且只在初始化时创建一次，后续 虚拟 DOM diff 时不再重新生成。

例：<div>静态文本</div> 会被提升为静态节点，组件更新时完全跳过。

(2). 补丁标记（Patch Flags）：

对动态节点添加补丁标记，标记其变化的原因（如文本变化、属性变化、子节点变化等）。

例：<div :class="activeClass">内容</div> 会被标记为 "类名变化"，更新时只检查类名是否改变。

(3). 缓存事件处理函数：

对模板中的事件绑定（如 @click="handleClick"），编译时会缓存函数引用，避免每次渲染创建新函数导致的不必要更新。

2. 运行时优化：细粒度依赖追踪

• Vue 3 使用 Proxy 实现响应式系统，能够精确追踪每个数据与使用它的具体 DOM 节点之间的对应关系。
• 当某个数据变化时，响应式系统只会通知直接依赖该数据的节点，而非整个组件。触发其对应的虚拟 DOM 重新生成，其他不相关的节点（包括依赖未变化数据的节点）完全不参与更新。
• 这种机制替代了 Vue 2 中 "组件级 Watcher" 的批量更新模式，实现了更精准的更新触发。

通过以上优化原理，Vue 3 实现了 "未变化的数据不参与虚拟 DOM 重新生成" 的高效更新机制，大幅减少了不必要的计算开销，尤其在大型组件中性能提升更为明显。