Vue 3 编译器通过解析、转换、生成三阶段将模板编译为渲染函数：解析将模板字符串转为AST，转换注入语义信息并优化（如静态提升、PatchFlag标记），生成将优化后AST转为可执行JS代码。
Vue 3 编译器把模板变成可执行的渲染函数，靠的是三个紧密衔接的阶段：解析（Parse）、转换（Transform）、生成（Generate）。这三个环节不是线性走完就结束，而是有明确分工又互相依赖——解析产出结构，转换做优化，生成落地为代码。
解析阶段：把模板字符串变成 AST 树
解析器读取<template></template>里的 HTML 字符串，逐字符识别标签、属性、插值、注释等，构建成一棵抽象语法树（AST）。它用状态机驱动，遇到 就判断是开始标签、结束标签还是自闭合标签；遇到 <code>{{ }} 就提取表达式内容，生成 InterpolationNode；纯文本则归为 TextNode。整个过程靠节点栈维护嵌套关系，确保父子层级不乱。
-
关键输入：原始模板字符串，比如
<div class="box"><p>{{ msg }}</p></div> -
核心输出：包含
ROOT、ELEMENT、INTERPOLATION等节点类型的 AST 对象 -
位置：逻辑实现在
@vue/compiler-core/src/parser.ts
转换阶段：给 AST 做语义增强和性能优化
转换器遍历解析得到的 AST，不是简单修改，而是注入运行时所需的信息。它会标记哪些节点是静态的（比如不含响应式变量的文本或元素），哪些指令需要特殊处理（如 v-if 拆成条件分支逻辑，v-for 提取循环参数），还会为动态部分打上 PatchFlag，告诉运行时“这里只需更新什么”。静态节点会被提升（hoist）到渲染函数外部，避免重复创建。
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
-
典型操作：调用
markStaticNodes、processDirectives、optimizeNestedStructure -
效果示例：
<p>Hello</p>被标记为静态，后续渲染直接复用已创建的 vnode -
模块路径：主要在
compiler-core/src/transform.ts和transforms/子目录下
生成阶段：把优化后的 AST 编译成 JavaScript 渲染函数
代码生成器把转换完成的 AST 当作蓝图，递归遍历每个节点，拼出合法、高效、带作用域的 JavaScript 函数体。它会把 ELEMENT 转成 h('div', ...) 调用，把 INTERPOLATION 转成 ctx.msg 这样的上下文访问，同时把静态提升的节点声明提前，再组合进最终的 render() 函数中。生成结果可直接被 Vue 运行时执行。
-
输出形式：字符串格式的 JS 代码，经
new Function()或打包工具转为函数 -
关键文件：
compiler-core/src/codegen.ts，含generate()主函数 -
平台适配：DOM 特定逻辑（如事件绑定、属性映射）由
@vue/compiler-dom补充
整个流程发生在构建时（SFC 编译）或首次组件挂载前（运行时编译），目标很实在：减少运行时解析开销，让 diff 和 patch 更快更准。
