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

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

模板解析（Parse）

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

• 比如你写了

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

  ，Vue 会把这个结构拆解成一个个节点对象。

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

生成 AST 并优化（Optimize）

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

立即学习“前端免费学习笔记（深入）”；

集简云

软件集成平台，快速建立企业自动化与智能化

21

查看详情

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

代码生成（Generate）

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

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

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