Vue编译器将模板转为渲染函数，分三阶段：解析为AST、语义转换与静态标记、生成可执行render函数及staticRenderFns。
Vue 编译器把模板语法转成渲染函数，核心是走通“模板 → AST → 渲染函数”这条链路。整个过程不是直译，而是分阶段、带语义分析和性能优化的结构化转换。
解析：模板字符串变成结构化 AST
编译器第一步是 parse，用正则 + 递归下降方式逐字符扫描模板，识别标签、属性、指令（如 v-if、v-for）、插值（{{ }}）和文本内容。每识别一个语法单元，就生成对应类型的 AST 节点：
-
元素节点（type: 1）：记录
tag、attrsList、children等，比如<div id="app" :class="cls"> -
表达式节点（type: 2）：对应
{{ msg }}，保留原始表达式字符串expression: "msg" -
纯文本节点（type: 3）：如静态文字
"Hello"，不带响应式逻辑
这棵 AST 是纯静态描述，不含运行时行为，只为后续转换提供清晰的语法骨架。
转换与优化：给 AST 注入语义和标记
第二步不是简单“翻译”，而是对 AST 做深度处理，主要包含两块：
-
指令转换：比如
v-for节点会被transformFor处理，提取item in list，生成循环结构；v-if触发条件分支逻辑；v-on绑定事件处理器 -
静态标记：遍历整棵树，判断哪些节点完全由静态内容构成（无插值、无指令、子节点也全静态），打上
static标记；再进一步识别出staticRoot（静态根节点），让后续 patch 阶段可跳过整棵子树的 diff
这个阶段输出的仍是 AST，但已携带运行时语义和优化线索，为生成高效代码打下基础。
生成：AST 编译为可执行的 render 函数
最后调用 generate，递归遍历优化后的 AST，按节点类型拼接 JavaScript 字符串代码：
- 元素节点 → 转成
h('div', { class: this.cls }, [...])形式调用 - 插值表达式 → 转成
this.msg或_s(this.msg)（字符串化包装） - 动态指令 → 转成对应的运行时 helper，如
_v（创建文本 vnode）、_l（处理 v-for 列表）
生成结果是两部分：render 字符串（主渲染逻辑）和 staticRenderFns 数组（静态子树的独立函数），最终通过 new Function('with(this){return ' + code + '}') 或类似机制封装为真正的函数对象。
整个过程在构建时（vue-loader）或运行时（完整版 Vue）完成，目标明确：把声明式模板，变成能高效产出 VNode 的可执行逻辑。
