vue 的组件模板编译过程分为三个阶段：1. 模板解析，将模板字符串解析为抽象语法树（ast），用 javascript 对象描述模板结构；2. 生成 ast 并优化，标记静态节点以提升渲染性能，减少不必要的 diff 计算；3. 代码生成，根据 ast 和优化信息生成渲染函数和静态渲染函数，最终返回虚拟 dom 所需的 vnode 数据。

Vue 的组件模板编译过程其实可以分成三个主要阶段：模板解析、生成 AST、代码生成。整个流程的核心目标是把我们写的模板转换成可以在页面上运行的 JavaScript 渲染函数。

模板解析（Parse）

这一步的主要任务是把模板字符串解析成抽象语法树（AST）。AST 是一个用 JavaScript 对象描述的结构化树形结构，它能清晰地表达模板中的元素、属性、文本等内容。

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

• 比如你写了

  <div class="box"><span>{{ msg }}</span></div>

  ，Vue 会把这个结构拆解成一个个节点对象。
• 解析过程中会识别开始标签、结束标签、文本节点、插值表达式等。
• 这一步不会做任何逻辑判断或优化，只是“翻译”模板为结构化的数据。

生成 AST 并优化（Optimize）

在 AST 生成之后，Vue 会进行一些优化操作，主要是为了提升后续渲染性能。

• 它会标记静态节点和静态根节点。例如一段不会变化的 HTML 结构会被打上“静态”的标签，在后续 diff 算法中跳过比较。
• 这一步不是必须的，但对性能有帮助，尤其是大型应用中频繁更新时。
• Vue 会分析哪些节点不需要响应式更新，从而减少不必要的计算。

代码生成（Generate）

最后一步是根据 AST 和优化后的信息，生成最终的渲染函数（render function）和静态渲染函数（staticRenderFns）。

• 渲染函数是一个返回 VNode 的函数，VNode 是虚拟 DOM 的基础。
• 插值表达式、指令、事件绑定等都会被转换成 JS 表达式。
• 最终这些函数会在组件实例创建时执行，生成页面内容。

基本上就这些步骤了。虽然看起来有点复杂，但每一步都各司其职，配合得挺默契的。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！