剖析 Vue2 模板编译的奥秘：从 AST 到静态 Render 函数

2023-12-26 22:25:36

从 AST 到静态 Render 函数

上篇文章《模版编译之生成 AST》中，我们将模版转换为了 AST。这篇文章将继续介绍如何将 AST 转为最终的 render 函数。

为了便于理解，我们仍然以之前的例子作为演示：

<div><span>3<5吗</span></div>

1. 准备工作

在开始转换之前，我们需要做一些准备工作。首先，我们需要创建一个函数，这个函数将 AST 作为参数，并返回最终的渲染函数。其次，我们需要定义一些辅助函数，这些函数将帮助我们完成 AST 到渲染函数的转换。

2. 创建渲染函数

function createRenderFunction(ast) {
  // 将 AST 转换为代码字符串
  const code = generateCode(ast);

  // 使用 new Function() 创建一个渲染函数
  return new Function(code);
}

3. 生成代码字符串

function generateCode(ast) {
  // 遍历 AST，并收集代码片段
  const code = [];
  traverseAST(ast, code);

  // 返回代码字符串
  return code.join('');
}

4. 遍历 AST

function traverseAST(ast, code) {
  // 根据 AST 节点的类型，调用相应的处理函数
  switch (ast.type) {
    case 'element':
      handleElement(ast, code);
      break;
    case 'text':
      handleText(ast, code);
      break;
    case 'expression':
      handleExpression(ast, code);
      break;
  }
}

5. 处理元素节点

function handleElement(ast, code) {
  // 生成元素节点的代码片段
  const code = [];

  // 生成开始标签的代码片段
  code.push(`createElement('${ast.tag}', {`);

  // 生成属性列表的代码片段
  if (ast.attrs.length > 0) {
    code.push('attrs: {');
    for (const attr of ast.attrs) {
      code.push(`'${attr.name}': '${attr.value}',`);
    }
    code.push('},');
  }

  // 生成子节点列表的代码片段
  if (ast.children.length > 0) {
    code.push('children: [');
    for (const child of ast.children) {
      traverseAST(child, code);
    }
    code.push('],');
  }

  // 生成结束标签的代码片段
  code.push('})');

  // 将代码片段添加到 code 数组中
  code.push.apply(code, code);
}

6. 处理文本节点

function handleText(ast, code) {
  // 生成文本节点的代码片段
  const code = [];

  // 生成文本内容的代码片段
  code.push(`createTextNode('${ast.text}')`);

  // 将代码片段添加到 code 数组中
  code.push.apply(code, code);
}

7. 处理表达式节点

function handleExpression(ast, code) {
  // 生成表达式节点的代码片段
  const code = [];

  // 生成表达式的代码片段
  code.push(`_s(${ast.expression})`);

  // 将代码片段添加到 code 数组中
  code.push.apply(code, code);
}