Vue 3 编译器工作流：解析、转换与生成-Vue.js-PHP中文网

Vue 3 编译器通过解析、转换、生成三阶段将模板编译为渲染函数：解析将模板字符串转为AST，转换注入语义信息并优化（如静态提升、PatchFlag标记），生成将优化后AST转为可执行JS代码。

vue 3 编译器工作流：解析、转换与生成

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-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

典型操作：调用 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 运行时执行。