[!info] related notes

• 所属 MOC: Vue MOC
• 相关概念: Vue 响应式系统, vue3-virtual-dom, vue-next-tick, vue3-performance-optimization
• 学习路径: vue-learning-roadmap, vue-interview-high-frequency

Vue渲染与更新流程

Vue 的更新不是“数据一变就立刻粗暴改 DOM”，而是一条由响应式依赖、渲染函数、虚拟 DOM 和批量更新组成的流程。

为什么要单独理解这一层

很多看似零散的问题，比如：

• 为什么改完状态拿到的 DOM 还是旧的
• 为什么 key 会影响节点复用
• 为什么 nextTick 有时必须等

本质都和更新流程有关。

一条主线就够了

1. 响应式状态变化
2. 依赖它的组件重新进入渲染计算
3. 生成新的虚拟 DOM
4. 与旧虚拟 DOM 比较差异
5. 批量更新真实 DOM
6. DOM 更新完成后，相关代码才能读到新界面

这里最容易混淆的点

• 状态变化不等于 DOM 立即完成更新
• 重渲染不等于整棵树全部重建
• key 不只是语法要求，而是节点身份信息

和相关概念的关系

• 响应式系统：决定谁会被重新追踪和触发
• vue3-virtual-dom：决定差异如何被比较和应用
• vue-next-tick：决定什么时候能安全读到更新后的 DOM

和性能的关系

这条更新主线也是理解 vue3-performance-optimization 的基础，因为性能问题很多时候就是更新范围过大、触发过频或列表比较成本过高。

最短记忆方式

Vue 更新主线 = 状态变化 -> 渲染重算 -> 虚拟 DOM 比较 -> 批量更新 DOM。

Related notes

• Vue MOC
• Vue3虚拟 DOM