可直接干预 Vue 编译过程，核心是替换或增强 @vue/compiler-core 的 parse→transform→generate 三阶段流水线，其中 transform 阶段最常用、最安全，支持逻辑注入、性能标记等构建时 AST 改造。
可以直接干预 Vue 编译过程，核心在于替换或增强 @vue/compiler-core 的标准编译流水线。这不是运行时 patch，而是构建阶段对 AST 的可控改造，适合做逻辑注入、性能标记、调试增强等场景。
理解编译三阶段与可插拔点
Vue3 编译分 parse → transform → generate 三个阶段，其中 transform 阶段是手动干预最常用、最安全的位置。它接收原始 AST，返回优化后的 AST，不涉及字符串解析或代码生成，类型清晰、副作用可控。
- parse：将模板字符串转为 AST；一般不建议修改，除非你要支持新语法（如自定义标签）
- transform：遍历 AST 节点，添加静态标记、处理指令、插入节点、重写表达式；这是注入逻辑的主战场
- generate：把 AST 转成渲染函数字符串；可改，但需谨慎——手写 JS 字符串易出错，且破坏 sourcemap
编写自定义 transform 插件
一个 transform 插件本质是一个函数，接收 AST 根节点和上下文对象，可同步修改节点属性或调用上下文方法插入新节点：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 使用
createTransformContext或直接在compile选项中传入transform数组 - 通过
node.type === 'Element'或'Interpolation'等判断节点类型 - 用
createObjectProperty、createCallExpression等 helper 构造 AST 节点，避免手拼字符串 - 示例：为每个
<button></button>自动注入点击埋点调用
在构建工具中接入自定义编译器
不同构建环境接入方式略有差异，但都围绕“覆盖默认 compiler”这一目标：
立即学习“前端免费学习笔记（深入）”；
-
Vite：在
vite.config.ts中配置vue.compilerOptions，传入自定义parse/transform/generate函数 -
Vue CLI：通过
vue.config.js的configureWebpack.chainWebpack修改@vue/compiler-sfc的 options -
浏览器内编译（如开发 demo）：直接 import
compile函数，传入含自定义 transform 的 options 对象
注入代码的典型模式
实际注入不是往 render 函数里塞字符串，而是通过 AST 操作让逻辑自然融入：
-
属性注入：给元素节点的
props数组 push 一个v-on:click对象，值为createCallExpression('trackClick', [...]) -
节点包裹：把
<div>{{ msg }}</div>改为<trackwrapper><div>{{ msg }}</div></trackwrapper>（需同步注册组件） -
表达式重写：将
{{ count + 1 }}替换为{{ __trackExpr(() => count + 1, 'count+1') }}，实现表达式级监控
