Vue 3源码极客之：模板编译器的`codegen`：从`AST`到高效`JS`代码的转换过程。

各位观众老爷们，晚上好！我是今天的主讲人，很高兴能和大家一起聊聊Vue 3源码里那块神秘又性感的代码——模板编译器中的codegen。

咱们今天要聊的是啥？是codegen，也就是代码生成器。简单来说，它就像一个翻译官，把模板编译器前端的AST（抽象语法树）翻译成咱们浏览器能直接跑的JavaScript代码。

这可不是简单的字符串拼接，里面涉及到性能优化、代码可读性、以及各种奇奇怪怪的边界情况处理。想想都刺激！

一、AST：编译器的剧本

在聊codegen之前，咱们得先简单回顾一下AST。你可以把AST想象成一个剧本，它详细描述了Vue组件模板中的每一个元素、属性、文本等等。codegen的任务就是把这个剧本翻译成演员（浏览器）能看懂的表演指令。

举个例子，假设我们有这样一个简单的Vue模板：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="handleClick">Click me</button>
  </div>
</template>

经过模板编译器的解析，它会生成一个AST，这个AST大概会是这个样子（简化版）：

{
  type: 'Root',
  children: [
    {
      type: 'Element',
      tag: 'div',
      props: [
        {
          type: 'Attribute',
          name: 'id',
          value: 'app'
        }
      ],
      children: [
        {
          type: 'Element',
          tag: 'h1',
          children: [
            {
              type: 'Interpolation',
              content: {
                type: 'SimpleExpression',
                content: 'message',
                isStatic: false
              }
            }
          ]
        },
        {
          type: 'Element',
          tag: 'button',
          props: [
            {
              type: 'Directive',
              name: 'on',
              arg: 'click',
              exp: 'handleClick'
            }
          ],
          children: [
            {
              type: 'Text',
              content: 'Click me'
            }
          ]
        }
      ]
    }
  ]
}

看着有点吓人？别怕，咱们一点点分解。type属性表示节点的类型，tag表示标签名，props表示属性，children表示子节点。总之，AST完整地记录了模板的结构和内容。

二、Codegen：翻译官的诞生

codegen的核心任务是遍历AST，然后根据每个节点的类型，生成对应的JavaScript代码。 Vue 3 使用了createCodegenContext函数来创建代码生成上下文。这个上下文里存着代码生成过程中的各种信息，比如最终生成的代码、当前缩进级别等等。

function createCodegenContext(ast, options) {
  const context = {
    code: '', // 最终生成的代码
    indentLevel: 0, // 缩进级别
    push(code) { // 添加代码片段
      context.code += code;
    },
    newline() { // 换行并添加缩进
      context.push('n' + '  '.repeat(context.indentLevel));
    },
    indent() { // 增加缩进级别
      context.indentLevel++;
    },
    deindent() { // 减少缩进级别
      context.indentLevel--;
    },
    source: ast.source, // 原始模板字符串
    options, // 编译选项
    helper(key) { // 辅助函数，用于生成Vue runtime中的函数调用
      return `_${helperNameMap[key]}`;
    }
  };
  return context;
}

上面这段代码，展示了createCodegenContext的大致结构，它定义了代码生成过程中需要用到的方法和属性。

三、Codegen的核心流程：遍历AST并生成代码

codegen的核心流程就是一个深度优先遍历AST的过程。对于每个节点，codegen会调用相应的生成函数来生成代码。

function generate(ast, options = {}) {
  const context = createCodegenContext(ast, options);
  const { push, newline, indent, deindent } = context;

  push('const _Vue = Vuen'); // 引入Vue实例

  const functionName = 'render';
  const args = ['_ctx', '_cache'];
  const signature = args.join(', ');

  push(`return function ${functionName}(${signature}) {`);
  indent();
  newline();
  push('return ');
  genNode(ast.children[0], context); // 递归生成代码
  deindent();
  newline();
  push('}');

  return {
    code: context.code
  };
}

这个generate函数就是codegen的入口，它首先创建代码生成上下文，然后定义了render函数，这个函数就是Vue组件的渲染函数。接下来，它会调用genNode函数来递归生成代码。

四、GenNode：根据节点类型生成代码

genNode函数是整个codegen中最核心的函数之一。它根据节点的类型，调用不同的生成函数来生成代码。

function genNode(node, context) {
  switch (node.type) {
    case 'Element':
      genElement(node, context);
      break;
    case 'Text':
      genText(node, context);
      break;
    case 'Interpolation':
      genInterpolation(node, context);
      break;
    case 'CompoundExpression':
      genCompoundExpression(node, context);
      break;
    // ... 其他节点类型
    default:
      break;
  }
}

这个genNode函数就是一个大的switch语句，它根据节点的类型，调用不同的生成函数。比如，如果节点类型是Element，就调用genElement函数；如果节点类型是Text，就调用genText函数。

五、重点节点类型的代码生成

接下来，我们来重点看看几种常见节点类型的代码生成过程。

1. Element节点：生成VNode

Element节点对应于HTML元素，它的代码生成目标是生成VNode（虚拟DOM节点）。

function genElement(node, context) {
  const { push, helper, indent, deindent, newline } = context;
  const { tag, props, children } = node;

  push(`${helper('createVNode')}(`);
  push(`"${tag}", `); // tag name

  // 处理props
  if (props.length > 0) {
    genProps(props, context);
  } else {
    push('null, ');
  }

  // 处理children
  if (children.length > 0) {
    if (children.length === 1) {
      genNode(children[0], context);
    } else {
      push('[');
      indent();
      newline();
      genChildren(children, context);
      deindent();
      newline();
      push(']');
    }
  } else {
    push('null');
  }

  push(')');
}

这段代码的关键在于调用了helper('createVNode')，这个helper函数会返回_createVNode，这是Vue runtime中的一个函数，用于创建VNode。

genElement函数会递归调用genProps和genChildren来处理元素的属性和子节点。

2. Text节点：生成文本节点

Text节点对应于模板中的文本内容，它的代码生成目标是生成一个文本节点。

function genText(node, context) {
  const { push, helper } = context;
  push(`${helper('createTextVNode')}("${node.content}")`);
}

这段代码很简单，它调用了helper('createTextVNode')，这个helper函数会返回_createTextVNode，这是Vue runtime中的一个函数，用于创建文本节点。

3. Interpolation节点：生成动态文本

Interpolation节点对应于模板中的插值表达式（{{ message }}），它的代码生成目标是生成一个动态文本节点。

function genInterpolation(node, context) {
  const { push, helper } = context;
  push(`${helper('toDisplayString')}(${node.content.content})`);
}

这段代码调用了helper('toDisplayString')，这个helper函数会返回_toDisplayString，这是Vue runtime中的一个函数，用于将表达式的值转换为字符串。

4. Directive节点：处理指令

Directive节点对应于Vue指令，比如v-bind、v-on等等。它的代码生成目标是生成相应的指令处理代码。

function genDirective(dir, node, context) {
  const { name, arg, exp, modifiers } = dir;
  const { push, helper } = context;

  switch (name) {
    case 'bind':
      // 处理v-bind指令
      break;
    case 'on':
      // 处理v-on指令
      break;
    case 'model':
      // 处理v-model指令
      break;
    default:
      break;
  }
}

这段代码只是一个框架，具体的指令处理逻辑需要根据指令的名称来确定。

六、性能优化：静态提升

codegen的一个重要优化手段是静态提升。对于那些在组件渲染过程中不会改变的节点，codegen会将它们提升到渲染函数之外，避免重复创建。

例如，对于下面的模板：

<template>
  <div>
    <h1>Hello</h1>
    <p>{{ message }}</p>
  </div>
</template>

<h1>Hello</h1>这个节点是静态的，它在组件渲染过程中不会改变。因此，codegen会将它提升到渲染函数之外，只创建一次。

const _hoisted_1 = /*#__PURE__*/_Vue.createVNode("h1", null, "Hello", -1 /* HOISTED */)

function render(_ctx, _cache) {
  return (_Vue.openBlock(), _Vue.createBlock("div", null, [
    _hoisted_1,
    _Vue.createVNode("p", null, _Vue.toDisplayString(_ctx.message), 1 /* TEXT */)
  ]))
}

可以看到，<h1>Hello</h1>节点被提升到了_hoisted_1变量中，在渲染函数中直接使用。

七、代码示例：一个完整的例子

现在，让我们来看一个完整的例子，展示codegen是如何将AST转换为JavaScript代码的。

假设我们有这样一个简单的Vue模板：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="handleClick">Click me</button>
  </div>
</template>

经过codegen处理后，生成的JavaScript代码可能是这样的：

const _Vue = Vue

const _hoisted_1 = { id: "app" }
const _hoisted_2 = /*#__PURE__*/_Vue.createTextVNode("Click me")

function render(_ctx, _cache) {
  return (_Vue.openBlock(), _Vue.createBlock("div", _hoisted_1, [
    _Vue.createVNode("h1", null, _Vue.toDisplayString(_ctx.message), 1 /* TEXT */),
    _Vue.createVNode("button", { onClick: _ctx.handleClick }, [_hoisted_2])
  ]))
}

可以看到，codegen将模板转换成了一个render函数，这个函数返回一个VNode树。

八、总结：Codegen的意义

codegen是Vue模板编译器的重要组成部分，它负责将AST转换为高效的JavaScript代码。codegen的性能直接影响到Vue应用的性能。

通过静态提升、优化VNode创建等手段，codegen可以生成更高效的代码，从而提升Vue应用的性能。

阶段	任务	优化手段
AST生成	解析模板，生成AST	缓存解析结果，避免重复解析
代码生成	遍历AST，生成JavaScript代码	静态提升，减少VNode创建
运行时	执行JavaScript代码，渲染DOM	diff算法，最小化DOM操作

九、未来展望

随着Web技术的不断发展，codegen面临着新的挑战和机遇。例如，如何更好地支持Web Components？如何更好地利用WebAssembly？这些都是codegen未来需要考虑的问题。

好了，今天的分享就到这里。希望大家对Vue 3的codegen有了更深入的了解。如果你有任何问题，欢迎随时提问。

感谢大家的观看！