Vue 的渲染系统把组件模板转换为界面描述，并通过运行时渲染器创建或更新真实 DOM。Vue 默认使用虚拟 DOM（Virtual DOM）：用 JavaScript 对象组成的虚拟节点树描述目标界面，再让渲染器使真实 DOM 与之同步。
渲染管线
Vue 官方将主要过程分为三个阶段：
- 编译（Compile）：模板被编译为渲染函数；编译可以在构建阶段完成，也可以由包含编译器的运行时版本执行。
- 挂载（Mount）：运行时调用渲染函数得到虚拟 DOM 树，遍历它并创建真实 DOM。组件渲染作为响应式副作用运行，同时记录本次读取的响应式依赖。
- 更新（Patch）：依赖变化后，渲染函数重新执行并产生新的虚拟 DOM 树；渲染器比较新旧树，将必要变化应用到真实 DOM。
虚拟 DOM 是一种实现模式，不是浏览器中的另一棵真实 DOM，也不代表每次更新都会重建整棵页面。
模板与渲染函数
模板最终会被编译成返回虚拟节点的渲染函数。Vue 也允许直接编写渲染函数或 JSX，但模板结构更容易被编译器静态分析，因此能获得更多编译期优化。
编译器辅助的虚拟 DOM
Vue 同时控制模板编译器和运行时渲染器，可以把模板的静态信息编码到生成结果中：
- 静态提升与缓存：复用不会变化的内容，跳过不必要的虚拟节点创建和比较。
- Patch Flags：标记节点可能变化的部分，例如文本或 class，使运行时走更具体的更新路径。
- Block Tree 与树结构拍平：集中记录动态后代，更新时减少需要遍历的节点。
这些优化不会改变声明式组件模型，而是缩小运行时更新需要检查的范围。
key 与节点身份
key 为同一父级下的虚拟节点提供身份提示。列表发生排序、插入或删除时，稳定且唯一的 key 可以帮助 Vue 正确复用和移动元素及组件；改变 key 也可以强制替换元素或组件。