分析 Vue 3 源码中如何将模板表达式（如 `{{ message }}`）编译为渲染函数中的 JavaScript 表达式。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！我是今天的主讲人，很高兴能和大家聊聊 Vue 3 源码中模板表达式编译这个话题。这玩意儿听起来好像很高深，但实际上，只要你理解了它的核心思路，就会发现它其实挺有趣的。

今天咱们就来扒一扒 Vue 3 源码的裤衩，看看它是怎么把我们写的模板表达式，比如 {{ message }}，变成渲染函数里可以执行的 JavaScript 表达式的。准备好了吗？Let’s go!

一、编译流程概览：从模板到渲染函数

首先，我们需要对 Vue 3 的整个编译流程有个大致的了解。这个流程可以简化成以下几个步骤：

解析 (Parsing): 把模板字符串转换成抽象语法树 (AST)。AST 是一个树形结构，它描述了模板的结构和内容。
转换 (Transformation): 遍历 AST，对其中的节点进行转换，例如处理指令、表达式等。
代码生成 (Code Generation): 根据转换后的 AST，生成渲染函数的 JavaScript 代码。

我们今天主要关注的是第二步和第三步中，和模板表达式相关的部分。具体来说，就是如何把 {{ message }} 这种表达式，转换成 _ctx.message 这种 JavaScript 表达式。

二、解析：找到花括号里的东西

在解析阶段，Vue 3 的解析器会扫描模板字符串，当遇到 {{ 和 }} 时，它会把中间的内容提取出来，作为一个 Interpolation 类型的 AST 节点。

举个例子，假设我们的模板是：

<div>{{ message }}</div>

解析器会生成一个如下的 AST (简化版)：

{
  type: 'Root',
  children: [
    {
      type: 'Element',
      tag: 'div',
      children: [
        {
          type: 'Interpolation',
          content: {
            type: 'SimpleExpression',
            content: 'message',
            isStatic: false
          }
        }
      ]
    }
  ]
}

可以看到，Interpolation 节点代表了插值表达式，它的 content 属性是一个 SimpleExpression 节点，包含了表达式的内容，也就是 message。isStatic 属性表示这个表达式是不是静态的，如果是静态的，比如 {{ 'hello' }}，那么 isStatic 就是 true，否则就是 false。

三、转换：让表达式活起来

接下来是转换阶段，这个阶段会遍历 AST，对其中的节点进行转换。对于 Interpolation 节点，转换的目标是把 content 属性的 SimpleExpression 节点，转换成渲染函数中可以执行的 JavaScript 表达式。

Vue 3 使用了一个叫做 transformExpression 的转换器来处理表达式。这个转换器会做以下几件事情：

检查表达式的类型: 判断表达式是简单的变量引用，还是复杂的 JavaScript 表达式。
注入上下文对象: 把表达式中的变量引用，转换成对上下文对象 _ctx 的访问。_ctx 是 Vue 组件的实例对象，包含了组件的数据和方法。
处理特殊情况: 比如处理全局变量、保留字等。

让我们来看一个简化版的 transformExpression 的实现：

function transformExpression(node, context) {
  if (node.type === 'Interpolation') {
    const content = node.content;
    if (content.type === 'SimpleExpression') {
      // 1. 检查是否需要注入上下文对象
      if (!content.isStatic) {
        // 2. 注入上下文对象
        content.content = `_ctx.${content.content}`;
      }
    }
  }
}

这个函数很简单，它首先判断节点是不是 Interpolation 类型，然后判断它的 content 属性是不是 SimpleExpression 类型。如果不是静态表达式，就给它的 content 属性加上 _ctx. 前缀。

所以，经过 transformExpression 的处理，上面的 AST 会变成：

{
  type: 'Root',
  children: [
    {
      type: 'Element',
      tag: 'div',
      children: [
        {
          type: 'Interpolation',
          content: {
            type: 'SimpleExpression',
            content: '_ctx.message',
            isStatic: false
          }
        }
      ]
    }
  ]
}

可以看到，content 属性的值已经变成了 _ctx.message。

四、代码生成：生成渲染函数

最后是代码生成阶段，这个阶段会根据转换后的 AST，生成渲染函数的 JavaScript 代码。对于 Interpolation 节点，代码生成器会生成一个包含表达式的字符串。

让我们来看一个简化版的代码生成器的实现：

function generate(ast) {
  let code = '';

  function traverse(node) {
    switch (node.type) {
      case 'Root':
        node.children.forEach(traverse);
        break;
      case 'Element':
        code += `<${node.tag}>`;
        node.children.forEach(traverse);
        code += `</${node.tag}>`;
        break;
      case 'Interpolation':
        code += `{{ ${node.content.content} }}`;
        break;
      default:
        break;
    }
  }

  traverse(ast);
  return code;
}

这个函数会遍历 AST，根据节点的类型生成不同的代码。对于 Interpolation 节点，它会把 content.content 的值放到 {{ 和 }} 中间。

所以，对于上面的 AST，代码生成器会生成如下的代码：

<div>{{ _ctx.message }}</div>

注意，这仍然是字符串形式的模板，但 Vue 3 会进一步将其编译为真正的 JavaScript 渲染函数。

五、更深入的例子：处理复杂的表达式

上面的例子只是一个简单的变量引用。如果表达式更复杂，比如 {{ message.toUpperCase() }}，Vue 3 又是怎么处理的呢？

实际上，transformExpression 转换器会把整个表达式都放到 _ctx 后面，变成 _ctx.message.toUpperCase()。

让我们来看一个例子：

<p>{{ message.toUpperCase() }}</p>

经过解析后，AST 如下：

{
  type: 'Root',
  children: [
    {
      type: 'Element',
      tag: 'p',
      children: [
        {
          type: 'Interpolation',
          content: {
            type: 'SimpleExpression',
            content: 'message.toUpperCase()',
            isStatic: false
          }
        }
      ]
    }
  ]
}

经过 transformExpression 转换后，AST 如下：

{
  type: 'Root',
  children: [
    {
      type: 'Element',
      tag: 'p',
      children: [
        {
          type: 'Interpolation',
          content: {
            type: 'SimpleExpression',
            content: '_ctx.message.toUpperCase()',
            isStatic: false
          }
        }
      ]
    }
  ]
}

可以看到，整个表达式 message.toUpperCase() 都被放到了 _ctx 后面。

最后，经过代码生成后，生成的代码如下：

<p>{{ _ctx.message.toUpperCase() }}</p>

Vue 3 会进一步把这个字符串编译成 JavaScript 渲染函数，这个渲染函数会执行 _ctx.message.toUpperCase()，并把结果渲染到页面上。

六、优化：with 语句和缓存

在早期的 Vue 版本中，会使用 with 语句来简化表达式的访问。with 语句可以把一个对象添加到作用域链的前端，这样就可以直接访问对象的属性，而不需要每次都写 _ctx.。

比如，如果使用了 with (_ctx)，那么就可以直接写 message，而不需要写 _ctx.message。

但是，with 语句在严格模式下是被禁止的，而且它会影响性能，所以 Vue 3 已经不再使用 with 语句了。

另外，Vue 3 还会对表达式进行缓存，避免重复计算。如果一个表达式的值没有发生变化，那么 Vue 3 会直接使用缓存的值，而不需要重新计算。

七、总结：编译过程的关键点

我们来总结一下 Vue 3 编译模板表达式的关键点：

步骤	描述	示例
解析 (Parsing)	将模板字符串解析成 AST，识别出 `{{ expression }}` 类型的插值表达式，并将其存储为 `Interpolation` 类型的 AST 节点。`Interpolation` 节点的 `content` 属性是一个 `SimpleExpression` 节点，包含了表达式的内容。	模板: `<div>{{ message }}</div>` AST 节点: `{ type: 'Interpolation', content: { type: 'SimpleExpression', content: 'message' } }`
转换 (Transformation)	遍历 AST，使用 `transformExpression` 转换器处理 `Interpolation` 节点。`transformExpression` 的主要任务是将表达式中的变量引用转换成对上下文对象 `_ctx` 的访问。它会检查表达式是否是静态的，如果不是，就在表达式前面加上 `_ctx.` 前缀。	AST 节点 (转换后): `{ type: 'Interpolation', content: { type: 'SimpleExpression', content: '_ctx.message' } }`
代码生成 (Code Generation)	根据转换后的 AST，生成渲染函数的 JavaScript 代码。对于 `Interpolation` 节点，代码生成器会生成一个包含表达式的字符串。这个字符串会被进一步编译成真正的 JavaScript 渲染函数。	模板字符串 (生成后): `<div>{{ _ctx.message }}</div>` (这个字符串会被进一步编译为 JavaScript 渲染函数)
优化	Vue 3 会对表达式进行缓存，避免重复计算。如果一个表达式的值没有发生变化，那么 Vue 3 会直接使用缓存的值，而不需要重新计算。	(内部优化，代码层不可见)

总而言之，Vue 3 编译模板表达式的过程，就是一个把模板字符串转换成 JavaScript 表达式的过程。这个过程涉及到解析、转换和代码生成三个阶段。通过这三个阶段的处理，Vue 3 能够把我们写的模板表达式，变成渲染函数中可以执行的 JavaScript 代码，从而实现动态渲染。

八、总结与展望

好了，今天的讲座就到这里了。希望通过今天的讲解，大家能够对 Vue 3 源码中模板表达式的编译过程有一个更清晰的了解。

Vue 3 的编译过程是一个非常复杂的过程，涉及到很多细节。今天我们只讲了其中和模板表达式相关的部分。如果你对 Vue 3 的编译过程感兴趣，可以深入研究 Vue 3 的源码，相信你会学到很多东西。

最后，感谢大家的聆听！希望大家以后也能多多关注 Vue 3，一起学习，一起进步！

各位靓仔靓女，拜拜！

发表回复 取消回复

发表回复取消回复