请阐述在 Vue 中，从编写模板开始到最终生成真实 DOM 的完整流程，包括编译、渲染函数、虚拟 DOM、diff 算法及更新等关键步骤，并说明各步骤的作用。
考察说明
考查对 Vue 模板编译机制和渲染管线整体理解。
回答思路
- 【回答框架 1】Vue 模板到渲染的过程包含编译、渲染函数、虚拟 DOM、diff 和更新等阶段。编译阶段将模板字符串解析为 AST（抽象语法树），然后优化 AST（标记静态节点），最后生成渲染函数（render function）。
- 【回答框架 2】渲染函数执行时返回虚拟 DOM（VNode）树。虚拟 DOM 是对真实 DOM 的抽象，以对象形式描述节点结构，包含标签名、属性、子节点等，具有跨平台和轻量特性。
- 【回答框架 3】首次渲染时，Vue 将虚拟 DOM 树通过 createElement 等方法生成真实 DOM，并挂载到页面。同时保存虚拟 DOM 树用于后续比较。
- 【回答框架 4】数据变化时，Vue 的响应式系统触发依赖更新，重新执行渲染函数生成新的虚拟 DOM 树。通过 diff 算法对比新旧 VNode 树，找出差异并精准更新到真实 DOM，避免全量重建。
- 【回答框架 5】更新过程采用异步批量策略（nextTick），合并同一事件循环内的多次数据变更，减少 DOM 操作次数，提升性能。
- 【关键点 1】模板编译三步骤：解析生成 AST、优化标记静态节点、生成渲染函数。
- 【关键点 2】渲染函数返回虚拟 DOM（VNode），描述视图结构。
- 【关键点 3】首次挂载：虚拟 DOM 创建真实 DOM 并插入页面。
- 【关键点 4】更新机制：响应式数据变化 -> 重新渲染 -> diff 比较 -> 局部更新。
- 【关键点 5】注意静态节点优化可跳过 diff，提升更新性能。
- 【易错点 1】不要把模板编译和运行时渲染混淆，编译发生在构建期或运行时，但渲染函数每次更新都会执行。
- 【易错点 2】diff 算法并非全量对比，而是同层对比，且通过 key 优化列表复用。
- 【易错点 3】数据变化后 DOM 更新是异步的，需要 wait nextTick 才能获取更新后的 DOM。