【Vue2 ✨】Vue2 入门之旅 · 进阶篇（三）：模板编译原理

在前两篇文章中，我们了解了 Vue2 的 虚拟 DOM 和 Diff 算法。本篇将深入解析 模板编译原理，了解 Vue 是如何将模板转化为渲染函数，并最终生成虚拟 DOM 的。

目录

1. 模板编译的流程
2. 从模板到 AST
3. AST 到 render function
4. 渲染函数执行与虚拟 DOM
5. 小结

模板编译的流程

Vue 将模板转化为最终的渲染函数，整个过程可以分为三个阶段：

1. 模板解析：将模板转换为 抽象语法树（AST）。
2. 优化：对 AST 进行优化，标记静态节点，避免重复渲染。
3. 代码生成：将 AST 转换为 JavaScript 渲染函数。

从模板到 AST

1. 模板解析阶段

模板字符串被传入编译器，编译器首先通过词法分析和语法分析将模板解析成 抽象语法树（AST）。AST 是一种树形结构，每个节点表示模板中的一部分，包含了模板的语法结构和表达式信息。

例如，以下是一个简单的模板：

<p>{{ message }}</p>

它会被编译成如下的 AST：

{
  type: 1,
  tag: 'p', // 标签名
  children: [
    {
      type: 2,
      expression: 'message', 
      text: '{{ message }}' // 文本内容
    }
  ]
}

其中，type 为节点类型，tag 表示 HTML 标签名，children 存储子节点。

AST 到 render function

2. 代码生成阶段

在模板被解析成 AST 后，Vue 会通过代码生成过程将 AST 转换成一个渲染函数。渲染函数是一个 JavaScript 函数，它的作用是根据当前的 数据状态（如 data、props）返回一个虚拟 DOM 树。

function render() {
  return _c('p', [_v(_s(this.message))])
}

其中，_c 是创建虚拟节点的函数，_v 是文本节点的创建函数，_s 是处理数据绑定的辅助函数。

渲染函数执行与虚拟 DOM

当 Vue 渲染组件时，它会执行生成的渲染函数，这个渲染函数会根据 数据 返回一个新的虚拟 DOM（VNode）。然后，Vue 会通过 Diff 算法对比新旧虚拟 DOM，找到差异并更新到真实 DOM 中。

示意流程：

1. 用户定义模板并传给 Vue。
2. Vue 通过编译器将模板转化为 AST。
3. 编译器根据 AST 生成渲染函数。
4. 渲染函数执行时返回虚拟 DOM。
5. Vue 使用 Diff 算法进行最小化的 DOM 更新。

小结

• 模板编译 是 Vue 渲染流程中的关键步骤，将模板转换为 AST，并生成渲染函数。
• 通过渲染函数，Vue 将模板变成了 JavaScript 代码，利用虚拟 DOM 来高效更新视图。
• 模板编译的流程包括：解析模板 → 生成 AST → 生成渲染函数 → 返回虚拟 DOM。

📗 下一篇进阶文章，我们将学习 异步更新与 nextTick 原理，深入了解 Vue 如何优化异步操作与更新。