Vue 框架里，模板字符串从传入到最终渲染，中间经历了怎样的编译与执行流程？
考察说明
考察对 Vue 模板编译原理、渲染函数生成及最终渲染机制的理解。
回答思路
- 【回答框架 1】Vue 模板编译分为三步：解析、优化与生成。解析阶段利用正则与栈结构将模板语法解析为 AST，AST 是描述模板节点层级与属性信息的对象树，内部包含标签、属性、文本、指令等字段，指令信息如 v-if、v-for 也在此阶段被提取。
- 【回答框架 2】优化阶段遍历 AST 标记静态子节点，这些节点在重新渲染时不会变化，可被缓存跳过 diff，从而提升性能。标记过程会递归考察子节点，只要包含动态绑定或组件则视为非静态。
- 【回答框架 3】生成阶段根据 AST 创建 render 函数字符串，通过 new Function 转换可直接执行的渲染函数。渲染函数执行时返回虚拟 DOM，后续由虚拟 DOM 的 diff 算法对比新旧节点，更新真实 DOM。整体流程在首次渲染和后续更新时反复执行。
- 【回答框架 4】编译过程分为运行时编译与预编译，完整版 Vue 支持运行时编译，程序员可传入模板字符串，构建时工具如 vue-loader 则会在打包阶段预编译模板，生成 render 函数，此时运行时不再包含编译器，包体积更小，性能更好。
- 【关键点 1】编译三阶段为解析、优化、生成，分别产出 AST、标记静态节点、生成 render 函数。
- 【关键点 2】AST 是模板的结构化表示，包含节点类型、属性、指令等关键信息。
- 【关键点 3】静态节点优化让渲染过程跳过不变内容，提升更新性能。
- 【关键点 4】render 函数执行产生虚拟 DOM，最终由 diff 算法更新真实 DOM。
- 【关键点 5】预编译与运行时编译的区别在于编译时机与是否在浏览器中引入编译器。
- 【易错点 1】容易混淆编译过程仅是模板转 render 函数，忽略优化阶段对静态节点的标记作用。
- 【易错点 2】不要误认为模板编译会直接生成真实 DOM，实际产物是虚拟 DOM。