发布于 由admin

分析 Vue 3 源码中如何将模板表达式（如 `{{ message }}`）编译为渲染函数中的 JavaScript 表达式。

各位观众，晚上好！我是老码，今晚给大家聊聊 Vue 3 源码里，模板表达式 {{ message }} 是怎么变成渲染函数里的 JavaScript 表达式的。这玩意儿听起来有点玄乎，但其实拆开来看，挺有意思的。咱们争取用大白话，加上一些代码示例，把这事儿给整明白。

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

先来个宏观的 overview，咱们看看 Vue 3 编译的大致流程：

阶段 输入 处理 输出
1. 解析 (Parsing) 模板字符串 将模板字符串解析成抽象语法树 (AST) AST (Abstract Syntax Tree)
2. 转换 (Transforming) AST 遍历 AST，进行各种优化和转换，比如处理指令、表达式等 修改后的 AST
3. 生成 (Code Generation) 修改后的 AST 将 AST 转换成 JavaScript 渲染函数代码字符串 渲染函数代码字符串

咱们今天主要关注的是 转换 (Transforming) 和 生成 (Code Generation) 这两个阶段，因为模板表达式的处理主要发生在这两个阶段。

二、解析 (Parsing)：模板到 AST 的华丽转身

解析阶段，Vue 3 会把你的模板字符串，比如：

<div>
  <p>{{ message }}</p>
  <button @click="handleClick">Click me</button>
</div>

变成一个 AST (抽象语法树)。AST 是一个 JavaScript 对象，它用树状结构来表示你的模板。

AST 的结构大概长这样（简化版）：

{
  type: 'Root',
  children: [
    {
      type: 'Element',
      tag: 'div',
      children: [
        {
          type: 'Element',
          tag: 'p',
          children: [
            {
              type: 'Interpolation', // 关键：插值表达式
              content: {
                type: 'SimpleExpression',
                content: 'message', // 关键：表达式内容
                isStatic: false
              }
            }
          ]
        },
        {
          type: 'Element',
          tag: 'button',
          props: [
            {
              type: 'Attribute',
              name: 'click',
              value: {
                type: 'SimpleExpression',
                content: 'handleClick',
                isStatic: false
              }
            }
          ],
          children: [
            {
              type: 'Text',
              content: 'Click me',
              isStatic: true
            }
          ]
        }
      ]
    }
  ]
}

注意看，{{ message }} 被解析成了 Interpolation 类型的节点，里面的 content 字段就是 message 这个表达式。@click="handleClick" 被解析成了 Attribute 类型的节点，content 字段是 handleClick 。

这个 AST 就是后续转换和生成的基础。

三、转换 (Transforming)：AST 的乾坤大挪移

转换阶段，Vue 3 会遍历 AST，对 AST 节点进行各种处理，比如：

  • 处理指令 (v-if, v-for, v-bind, v-on 等)
  • 优化静态节点 (标记静态节点，避免重复渲染)
  • 转换模板表达式 (把 {{ message }} 转换成 JavaScript 表达式)

对于 {{ message }} 这种插值表达式，Vue 3 会把它转换成 _ctx.message。_ctx 是渲染上下文，包含了组件的 data、methods、computed 等属性。

具体来说，转换的过程大概是这样：

  1. 找到 Interpolation 类型的节点。
  2. 获取 content 字段的值 (也就是 message)。
  3. 判断 message 是否是静态的 (isStatic)。 如果是静态的，就直接作为字符串字面量；如果是动态的，就加上 _ctx. 前缀。
  4. 把 Interpolation 节点的 content 字段替换成转换后的 JavaScript 表达式。

Vue 3 源码里，这个转换逻辑主要在 packages/compiler-core/src/transforms/transformExpression.ts 文件里。 虽然直接贴源码有点枯燥，但为了让大家更深入理解，咱们来瞅瞅关键部分：

// 简化版
function transformExpression(node, context) {
  if (node.type === NodeTypes.INTERPOLATION) {
    const content = node.content;

    if (content.type === NodeTypes.SIMPLE_EXPRESSION) {
      const rawExp = content.content;

      // 检查是否需要前缀 _ctx.
      if (!content.isStatic) {
        content.content = `_ctx.${rawExp}`; // 关键：加上 _ctx. 前缀
      }
    }
  }
}

这段代码的核心就是判断 content.isStatic 是否为 false，如果是 false，就给 content.content 加上 _ctx. 前缀。

四、生成 (Code Generation)：AST 到渲染函数的最后一步

生成阶段，Vue 3 会把转换后的 AST 转换成 JavaScript 渲染函数代码字符串。

对于上面的例子，生成的渲染函数代码大概是这样：

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("p", null, [_createTextVNode(_toDisplayString(_ctx.message) + "", 1)]), // 关键：_ctx.message
    _createVNode("button", { onClick: _ctx.handleClick }, "Click me") // 关键：_ctx.handleClick
  ]))
}

注意看，{{ message }} 变成了 _ctx.message，并且被包裹在了 _toDisplayString() 函数里。_toDisplayString() 函数的作用是将表达式的值转换成字符串。

@click="handleClick" 变成了 onClick: _ctx.handleClick。

五、深入剖析：_ctx 是个啥？

_ctx 是渲染上下文 (Rendering Context)，它是一个 JavaScript 对象，包含了组件的 data、methods、computed 等属性。

在 Vue 3 里，_ctx 是在组件实例化的时候创建的。它会把组件的 data、methods、computed 等属性都绑定到 _ctx 上，这样在渲染函数里就可以通过 _ctx.xxx 来访问这些属性。

举个例子，假设你的组件是这样定义的：

const MyComponent = {
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  },
  methods: {
    handleClick() {
      alert('Clicked!')
    }
  }
}

那么，在渲染函数里，_ctx.message 就会访问到 data.message 的值，_ctx.handleClick 就会访问到 methods.handleClick 函数。

六、动态表达式：更复杂的情况

上面的例子比较简单，表达式只有一个变量 message。但实际情况可能会更复杂，比如：

<div>
  <p>{{ message + ' ' + name }}</p>
  <p>{{ count > 10 ? 'Greater than 10' : 'Less than or equal to 10' }}</p>
</div>

对于这种复杂的表达式，Vue 3 也会进行转换。它会把表达式拆解成一个个小的部分，然后分别加上 _ctx. 前缀。

例如，{{ message + ' ' + name }} 会被转换成 _ctx.message + ' ' + _ctx.name。

{{ count > 10 ? 'Greater than 10' : 'Less than or equal to 10' }} 会被转换成 _ctx.count > 10 ? 'Greater than 10' : 'Less than or equal to 10'。

七、一些注意事项

  • 性能优化： Vue 3 在编译阶段会进行很多优化，比如标记静态节点、缓存表达式的值等，以提高渲染性能。
  • 错误处理： 如果表达式在运行时出现错误，Vue 3 会给出相应的错误提示。
  • 安全性： Vue 3 会对模板表达式进行转义，以防止 XSS 攻击。

八、总结

总而言之，Vue 3 编译模板表达式的过程可以概括为以下几个步骤：

  1. 解析 (Parsing)： 将模板字符串解析成 AST。
  2. 转换 (Transforming)： 遍历 AST，将模板表达式转换成 JavaScript 表达式 (_ctx.xxx)。
  3. 生成 (Code Generation)： 将 AST 转换成 JavaScript 渲染函数代码字符串。

通过这三个步骤，Vue 3 就可以把你的模板表达式转换成渲染函数里的 JavaScript 表达式，从而实现动态渲染。

希望今天的讲解能帮助大家更好地理解 Vue 3 编译原理。当然，Vue 3 编译器的源码非常复杂，这里只是一个简单的介绍。如果大家想更深入地了解，建议去阅读 Vue 3 源码。

好了，今天的分享就到这里，感谢大家的观看！大家有什么问题可以在评论区提问，我会尽力解答。下次再见！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注