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

各位观众老爷们，大家好！今天咱来聊聊Vue 3源码里一个挺有意思的话题：模板表达式是怎么变成JavaScript表达式的。这就像变魔术一样，{{ message }} 嗖的一下就变成了能跑的JS代码，是不是有点好奇？别急，咱们慢慢拆解。

开场白：Vue的“乾坤大挪移”

Vue的模板编译，说白了，就是个“乾坤大挪移”的过程。它把我们写的模板，不管是HTML标签、指令还是那些花括号括起来的表达式，都一股脑儿地转换成JavaScript代码。而这个JavaScript代码，就是渲染函数（render function），专门负责生成虚拟DOM（Virtual DOM）。

模板表达式 {{ message }}，在这里扮演的角色是“原材料”。我们想要在页面上显示message的值，但浏览器可不认识这玩意儿。所以，Vue必须把它翻译成浏览器能理解的JavaScript代码。

第一步：词法分析（Lexical Analysis）

首先，编译器要做的就是把模板字符串拆解成一个个“token”。你可以把token想象成一个个独立的单词，比如：

<div>：标签开始
{{：表达式开始
message：标识符
}}：表达式结束
</div>：标签结束

这个过程就像英语老师把一个句子拆解成主语、谓语、宾语一样。Vue的词法分析器会识别出模板中的各种元素，并为它们打上标签。

第二步：语法分析（Syntactic Analysis）

有了token之后，编译器就要开始构建抽象语法树（Abstract Syntax Tree，AST）。AST就像一棵树，它用一种树状结构来表示模板的语法结构。

举个例子，对于模板 <div>{{ message }}</div>，生成的AST可能长这样：

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

Root：根节点，代表整个模板
Element：元素节点，代表HTML标签（比如<div>）
Interpolation：插值节点，代表{{ message }}这样的表达式
SimpleExpression：简单表达式节点，代表message这个变量

AST的作用是把模板的结构用一种计算机更容易理解的方式表达出来。有了AST，编译器就可以更容易地进行后续的处理。

第三步：转换（Transformation）

转换阶段是整个编译过程的核心。它负责遍历AST，并对其中的节点进行转换，最终生成渲染函数所需的JavaScript代码。

对于插值节点 Interpolation，转换的目标就是把 {{ message }} 变成 _toDisplayString(_ctx.message) 这样的表达式。

_toDisplayString：一个Vue提供的辅助函数，用于把值转换成字符串，防止出现错误。
_ctx：渲染上下文，包含了组件实例的数据和方法。_ctx.message 就表示访问组件实例的message属性。

这个转换过程涉及以下几个关键步骤：

识别插值节点： 遍历AST，找到类型为 Interpolation 的节点。
提取表达式： 从节点中提取出表达式的内容（比如message）。
生成JavaScript表达式： 使用辅助函数和渲染上下文，把表达式转换成JavaScript代码。

为了更直观地理解这个过程，我们可以用伪代码来表示：

function transformInterpolation(node) {
  if (node.type === 'Interpolation') {
    const expression = node.content.content; // 提取表达式内容，例如 "message"

    // 构建 JavaScript 表达式
    const jsExpression = `_toDisplayString(_ctx.${expression})`;

    // 替换 AST 节点
    node.content = {
      type: 'SimpleExpression',
      content: jsExpression,
      isStatic: false // 标记为动态表达式
    };
  }
}

这个伪代码展示了如何把插值节点转换成JavaScript表达式。实际的Vue源码要复杂得多，但核心思想是类似的。

第四步：代码生成（Code Generation）

代码生成阶段负责把转换后的AST转换成最终的渲染函数代码。它会遍历AST，并根据节点的类型生成相应的JavaScript代码。

对于上面的例子，最终生成的渲染函数代码可能长这样：

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", null, _toDisplayString(_ctx.message)))
}

_openBlock 和 _createBlock：Vue提供的辅助函数，用于创建虚拟DOM节点。
_toDisplayString(_ctx.message)：我们之前生成的JavaScript表达式，用于显示message的值。

这个渲染函数会在组件渲染时被调用，生成对应的虚拟DOM节点，并最终更新到页面上。

深入源码：transformInterpolation函数的真面目

为了更好地理解转换过程，我们可以深入Vue 3的源码，看看transformInterpolation函数是如何实现的。

这个函数位于 packages/compiler-core/src/transforms/transformInterpolation.ts 文件中。它的核心代码如下：

import { NodeTransform } from '../transform'
import { NodeTypes } from '../ast'
import { createCallExpression, toDisplayString } from '../utils'

export const transformInterpolation: NodeTransform = (node, context) => {
  if (node.type === NodeTypes.INTERPOLATION) {
    node.content = createCallExpression(
      context.helper(toDisplayString),
      [node.content]
    )
  }
}

NodeTransform：一个类型定义，表示节点转换函数。
NodeTypes.INTERPOLATION：常量，表示插值节点的类型。
createCallExpression：一个辅助函数，用于创建函数调用表达式。
context.helper(toDisplayString)：获取 _toDisplayString 辅助函数的引用。

这个函数首先判断节点类型是否为 INTERPOLATION，如果是，则调用 createCallExpression 函数创建一个函数调用表达式。这个表达式会调用 _toDisplayString 函数，并将插值节点的内容作为参数传递给它。

createCallExpression 函数的实现如下：

import { CallExpression, ExpressionNode } from '../ast'
import { CREATE_ELEMENT_VNODE } from '../runtimeHelpers'

export function createCallExpression(
  callee: string | symbol,
  args: (string | symbol | ExpressionNode | CallExpression | undefined)[]
): CallExpression {
  return {
    type: 13 /* NodeTypes.CALL_EXPRESSION */,
    callee,
    arguments: args
  }
}

这个函数创建一个 CallExpression 节点，表示一个函数调用表达式。它接收两个参数：callee 表示被调用的函数名，args 表示函数的参数。

总结：模板表达式的“变形记”

总而言之，Vue 3把模板表达式转换成JavaScript表达式的过程可以概括为以下几个步骤：

词法分析： 把模板字符串拆解成token。
语法分析： 构建抽象语法树（AST）。
转换： 遍历AST，把插值节点转换成JavaScript表达式。
代码生成： 把转换后的AST转换成渲染函数代码。

用表格总结一下：

阶段	描述	涉及的数据结构/函数	示例
词法分析	将模板字符串分解成一个个的token。	Token	`<div>`, `{{`, `message`, `}}`, `</div>`
语法分析	基于token构建抽象语法树（AST），表达模板的结构。	AST Node (Root, Element, Interpolation, SimpleExpression…)	参考前文的AST结构例子。
转换	遍历AST，将特定的节点（如插值节点）转换成JavaScript表达式。	`transformInterpolation`, `createCallExpression`, `context.helper(toDisplayString)`	将 `{{ message }}` 转换为 `_toDisplayString(_ctx.message)`
代码生成	将转换后的AST生成可执行的JavaScript渲染函数。	`_openBlock`, `_createBlock`, `_toDisplayString` (都是runtimeHelpers)	`function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createBlock("div", null, _toDisplayString(_ctx.message))) }`

思考题：指令的转换

除了插值表达式，Vue还支持各种指令，比如 v-if、v-for 等。这些指令又是如何转换成JavaScript代码的呢？

提示：指令的转换比插值表达式更复杂，它涉及到更多的逻辑判断和代码生成。你可以参考Vue 3的源码，深入了解指令转换的实现细节。

结尾语：编译器的魅力

Vue的模板编译是一个复杂而精巧的过程。它充分利用了JavaScript的语法特性，把模板转换成高效可执行的代码。理解模板编译的原理，可以帮助我们更好地理解Vue的运作机制，写出更高效的Vue代码。

希望今天的分享对你有所帮助。下次再见！

发表回复 取消回复

发表回复取消回复