什么是编译阶段的 Transform 转换？教你如何实现自定义的模板转换规则-Vue.js-PHP中文网

transform 是编译流程中对 ast 进行语义增强与结构优化的关键阶段，位于 parse 之后、codegen 之前，通过多轮 nodetransforms 遍历注入元信息、提升静态节点、缓存表达式，并支持自定义转换规则。

什么是编译阶段的 transform 转换？教你如何实现自定义的模板转换规则

Transform 是编译流程中承上启下的关键阶段，它不生成代码，也不解析语法，而是对已生成的抽象语法树（AST）进行语义增强与结构优化。简单说，就是给原始模板“加智力”——让静态内容更轻、动态逻辑更准、指令行为更可控。

Transform 在编译流水线中的定位

它位于 parse（解析成 AST）之后、codegen（生成 render 函数）之前。此时 AST 已具备完整结构，但缺乏运行时所需的元信息和优化标记。Transform 就是往这棵树里注入上下文、打标签、拆逻辑、提静态节点、缓存表达式，为后续高效执行铺路。

Parse 输出的是“语法正确但语义模糊”的树
Transform 输出的是“带运行提示、可跳过、可复用”的增强树
Codegen 依赖 Transform 填充的 helpers、hoists、cached 等字段生成真正高效的 JS 渲染代码

核心操作：遍历 + 转换函数链

Vue3 的 transform 使用多轮节点遍历机制，通过一组预设或自定义的 nodeTransforms 函数逐层处理 AST 节点。每个函数接收当前节点和上下文，可修改节点属性、插入辅助调用、甚至替换整个子树。

典型内置转换函数包括：transformIf（处理 v-if）、transformFor（处理 v-for）、transformExpression（安全包裹表达式）
上下文（context）维护全局状态：导入的辅助函数、提升的静态节点列表、缓存的计算结果、注册的组件/指令等
支持“进入”和“退出”钩子：比如先标记父元素是否静态，再递归子节点；子节点处理完后，统一决定是否把整块提到 setup 外部（静态提升）

如何实现自定义模板转换规则

自定义 Transform 不需要改 Vue 源码，而是通过插件或编译器选项注入自己的 nodeTransform。适用于统一处理特定语法、注入调试信息、适配旧模板写法、或对接内部 DSL。

在构建配置中扩展 compilerOptions，传入自定义 nodeTransforms 数组
每个 transform 函数形如 (node, context) => { /* 修改 node 或返回 onExit 函数 */ }
示例：自动为所有带 data-track 属性的元素添加事件埋点逻辑
注意作用域隔离：你的 transform 只影响当前模板，不会污染其他组件或全局行为

不只是 Vue：Transform 是通用编译思想

从 Android Gradle 的 Class 字节码插桩，到 Pandoc 文档格式转换，再到 PasteMD 的富文本清洗，本质都是“输入结构化数据 → 遍历节点 → 按规则改写 → 输出新结构”。区别只在于 AST 形态不同：Vue 是模板 AST，Android 是字节码 AST，Pandoc 是文档 AST。