AST是Vue模板编译的中间JavaScript对象树，将原始模板字符串解析为含type、children、props等字段的结构化节点，承上启下连接解析与优化/代码生成阶段。
Vue.js 模板编译后的中间表现形式就是抽象语法树（AST），它不是最终可执行的代码，也不是原始 HTML 字符串，而是一个结构清晰、可遍历、可操作的 JavaScript 对象树。
AST 是什么？
AST（Abstract Syntax Tree）是模板语法的结构化表示。比如一段模板 <div id="app"><p>{{ msg }}</p></div>，会被解析成一个嵌套的对象，包含根节点、元素节点、文本节点、插值节点等。每个节点记录类型、标签名、属性、子节点、位置信息等关键字段，便于后续处理。
AST 在 Vue 编译流程中的位置
它是整个模板编译链路的承上启下环节：
- 输入：原始 template 字符串（或 DOM innerHTML）
- 产出：标准 AST 对象（如 RootNode、ElementNode、InterpolationNode）
- 后续：交给 optimize 阶段做静态标记，再由 generate 阶段转为 render 函数字符串
AST 的典型结构特征
以 Vue 3 的 @vue/compiler-core 为例，AST 节点普遍具备以下共性：
立即学习“前端免费学习笔记（深入）”；
-
type：标识节点类型，如
"Element"、"Text"、"Interpolation"、"Root" - children：子节点数组，体现树的嵌套关系
- props：属性列表，每个属性含 name、value、dynamic 等字段
- loc：源码位置信息（start/end 行列号），用于错误定位和 sourcemap
- 部分节点还携带
isStatic、patchFlag等运行时优化标记
为什么必须经过 AST 这一环？
直接操作字符串生成 render 函数极其脆弱且难以维护。AST 提供了稳定、语义明确的数据结构：
- 支持指令识别（如 v-if、v-for）并提取逻辑表达式
- 允许静态节点提升（static hoisting），减少 diff 开销
- 便于跨平台目标生成（如 SSR、小程序、Web Components）
- 让 transform 插件能安全地遍历、修改、注入节点
