AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

终于搞懂了！原来 Vue 3 的 generate 是这样生成 render 函数的

分类：Vue作者：前端欧阳原文地址

前言

在之前的 面试官：来说说vue3是怎么处理内置的v-for、v-model等指令？ 文章中讲了transform阶段处理完v-for、v-model等指令后，会生成一棵javascript AST抽象语法树。这篇文章我们来接着讲generate阶段是如何根据这棵javascript AST抽象语法树生成render函数字符串的，本文中使用的vue版本为3.4.19。

看个demo

还是一样的套路，我们通过debug一个demo来搞清楚render函数字符串是如何生成的。demo代码如下：

<template>
  <p>{{ msg }}</p>
</template>

<script setup lang="ts">
import { ref } from "vue";

const msg = ref("hello world");
</script>

上面这个demo很简单，使用p标签渲染一个msg响应式变量，变量的值为"hello world"。我们在浏览器中来看看这个demo生成的render函数是什么样的，代码如下：

import { todisplayString as _todisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "/node_modules/.vite/deps/vue.js?v=23bfe016";
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return _openBlock(), _createElementBlock(
    "p",
    null,
    _todisplayString($setup.msg),
    1
    /* TEXT */
  );
}

上面的render函数中使用了两个函数：openBlock和createElementBlock。在之前的 vue3早已具备抛弃虚拟DOM的能力了文章中我们已经讲过了这两个函数：

  • openBlock的作用为初始化一个全局变量currentBlock数组，用于收集dom树中的所有动态节点。

  • createElementBlock的作用为生成根节点p标签的虚拟DOM，然后将收集到的动态节点数组currentBlock塞到根节点p标签的dynamicChildren属性上。

render函数的生成其实很简单，经过transform阶段处理后会生成一棵javascript AST抽象语法树，这棵树的结构和要生成的render函数结构是一模一样的。所以在generate函数中只需要递归遍历这棵树，进行字符串拼接就可以生成render函数啦！

关注公众号：【前端欧阳】，解锁我更多vue原理文章。

加我微信heavenyjj0012回复「666」，免费领取欧阳研究vue源码过程中收集的源码资料，欧阳写文章有时也会参考这些资料。同时让你的朋友圈多一位对vue有深入理解的人。

generate函数

首先给generate函数打个断点，generate函数在node_modules/@vue/compiler-core/dist/compiler-core.cjs.js文件中。

然后启动一个debug终端，在终端中执行yarn dev（这里是以vite举例）。在浏览器中访问  http://localhost:5173/ ，此时断点就会走到generate函数中了。在我们这个场景中简化后的generate函数是下面这样的：

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

  const preambleContext = context;
  genModulePreamble(ast, preambleContext);

  const functionName = `render`;
  const args = ["_ctx", "_cache"];
  args.push("$props", "$setup", "$data", "$options");
  const signature = args.join(", ");
  push(`function ${functionName}(${signature}) {`);

  indent();
  push(`return `);
  genNode(ast.codegenNode, context);

  deindent();
  push(`}`);
  return {
    ast,
    code: context.code,
  };
}

generate中主要分为四部分：

context上下文对象

context上下文对象是执行createCodegenContext函数生成的，将断点走进createCodegenContext函数。简化后的代码如下：

function createCodegenContext() {
  const context = {
    code: ``,
    indentLevel: 0,
    helper(key) {
      return `_${helperNameMap[key]}`;
    },
    push(code) {
      context.code += code;
    },
    indent() {
      newline(++context.indentLevel);
    },
    deindent(withoutNewLine = false) {
      if (withoutNewLine) {
        --context.indentLevel;
      } else {
        newline(--context.indentLevel);
      }
    },
    newline() {
      newline(context.indentLevel);
    },
  };

  function newline(n) {
    context.push("\n" + `  `.repeat(n));
  }

  return context;
}

为了代码具有较强的可读性，我们一般都会使用换行和锁进。context上下文中的这些属性和方法作用就是为了生成具有较强可读性的render函数。

生成import {xxx} from "vue"

我们接着来看generate函数中的第二部分，生成import {xxx} from "vue"。将断点走进genModulePreamble函数，在我们这个场景中简化后的genModulePreamble函数代码如下：

function genModulePreamble(ast, context) {
  const { push, newline, runtimeModuleName } = context;
  if (ast.helpers.size) {
    const helpers = Array.from(ast.helpers);
    push(
      `import { ${helpers
        .map((s) => `${helperNameMap[s]} as _${helperNameMap[s]}`)
        .join(", ")} } from ${JSON.stringify(runtimeModuleName)}
`,
      -1 /* End */
    );
  }
  genHoists(ast.hoists, context);
  newline();
  push(`export `);
}

其中的ast.helpers是在transform阶段收集的需要从vue中import导入的函数，无需将vue中所有的函数都import导入。在debug终端看看helpers数组中的值如下图：

helpers

从上图中可以看到需要从vue中import导入todisplayString、openBlock、createElementBlock这三个函数。

在执行push方法之前我们先来看看此时的render函数字符串是什么样的，如下图：

before-import

从上图中可以看到此时生成的render函数字符串还是一个空字符串，执行完push方法后，我们来看看此时的render函数字符串是什么样的，如下图：

after-import

从上图中可以看到此时的render函数中已经有了import {xxx} from "vue"了。

这里执行的genHoists函数就是前面 搞懂 Vue 3 编译优化：静态提升的秘密文章中讲过的静态提升的入口。

生成render函数中的函数名称和参数

执行完genModulePreamble函数后，已经生成了一条import {xxx} from "vue"了。我们接着来看generate函数中render函数的函数名称和参数是如何生成的，代码如下：

const functionName = `render`;
const args = ["_ctx", "_cache"];
args.push("$props", "$setup", "$data", "$options");
const signature = args.join(", ");
push(`function ${functionName}(${signature}) {`);

上面的代码很简单，都是执行push方法向render函数中添加code字符串，其中args数组就是render函数中的参数。我们在来看看执行完上面这块代码后的render函数字符串是什么样的，如下图：

before-genNode

从上图中可以看到此时已经生成了render函数中的函数名称和参数了。

生成render函数中return的内容

接着来看generate函数中最后一块代码，如下：

indent();
push(`return `);
genNode(ast.codegenNode, context);

首先调用indent方法插入一个换行符并且增加一个锁进，然后执行push方法添加一个return字符串。

接着以根节点的codegenNode属性为参数执行genNode函数生成return中的内容，在我们这个场景中genNode函数简化后的代码如下：

function genNode(node, context) {
  switch (node.type) {
    case NodeTypes.SIMPLE_EXPRESSION:
      genExpression(node, context)
      break
    case NodeTypes.INTERPOLATION:
      genInterpolation(node, context);
      break;
    case NodeTypes.VNODE_CALL:
      genVNodeCall(node, context);
      break;
  }
}

这里涉及到SIMPLE_EXPRESSION、INTERPOLATION和VNODE_CALL三种AST抽象语法树node节点类型：

  • INTERPOLATION：表示当前节点是双大括号节点，我们这个demo中就是：{{msg}}这个文本节点。

  • SIMPLE_EXPRESSION：表示当前节点是简单表达式节点，在我们这个demo中就是双大括号节点{{msg}}中的更里层节点msg

  • VNODE_CALL：表示当前节点是虚拟节点，比如我们这里第一次调用genNode函数传入的ast.codegenNode（根节点的codegenNode属性）就是虚拟节点。

genVNodeCall函数

由于当前节点是虚拟节点，第一次进入genNode函数时会执行genVNodeCall函数。在我们这个场景中简化后的genVNodeCall函数代码如下：

const OPEN_BLOCK = Symbol(`openBlock`);
const CREATE_ELEMENT_BLOCK = Symbol(`createElementBlock`);

function genVNodeCall(node, context) {
  const { push, helper } = context;
  const { tag, props, children, patchFlag, dynamicProps, isBlock } = node;
  if (isBlock) {
    push(`(${helper(OPEN_BLOCK)}(${``}), `);
  }
  const callHelper = CREATE_ELEMENT_BLOCK;
  push(helper(callHelper) + `(`, -2 /* None */, node);

  genNodeList(
    // 将参数中的undefined转换成null
    genNullableArgs([tag, props, children, patchFlag, dynamicProps]),
    context
  );

  push(`)`);
  if (isBlock) {
    push(`)`);
  }
}

首先判断当前节点是不是block节点，由于此时的node为根节点，所以isBlock为true。将断点走进helper方法，我们来看看helper(OPEN_BLOCK)返回值是什么。helper方法的代码如下：

const helperNameMap = {
  [OPEN_BLOCK]: `openBlock`,
  [CREATE_ELEMENT_BLOCK]: `createElementBlock`,
  [TO_disPLAY_STRING]: `todisplayString`,
  // ...省略
};

helper(key) {
  return `_${helperNameMap[key]}`;
}

helper方法中的代码很简单，这里的helper(OPEN_BLOCK)返回的就是_openBlock。

将断点走到第一个push方法，代码如下：

push(`(${helper(OPEN_BLOCK)}(${``}), `);

执行完这个push方法后在debug终端看看此时的render函数字符串是什么样的，如下图：

after-block

从上图中可以看到，此时render函数中增加了一个_openBlock函数的调用。

将断点走到第二个push方法，代码如下：

const callHelper = CREATE_ELEMENT_BLOCK;
push(helper(callHelper) + `(`, -2 /* None */, node);

同理helper(callHelper)方法返回的是_createElementBlock，执行完这个push方法后在debug终端看看此时的render函数字符串是什么样的，如下图：

after-createElementBlock

从上图中可以看到，此时render函数中增加了一个_createElementBlock函数的调用。

继续将断点走到genNodeList部分，代码如下：

genNodeList(
  genNullableArgs([tag, props, children, patchFlag, dynamicProps]),
  context
);

其中的genNullableArgs函数功能很简单，将参数中的undefined转换成null。比如此时的props就是undefined，经过genNullableArgs函数处理后传给genNodeList函数的props就是null。

genNodeList函数

继续将断点走进genNodeList函数，在我们这个场景中简化后的代码如下：

function genNodeList(nodes, context, multilines = false, comma = true) {
  const { push } = context;
  for (let i = 0; i < nodes.length; i++) {
    const node = nodes[i];
    if (shared.isstring(node)) {
      push(node);
    } else {
      genNode(node, context);
    }
    if (i < nodes.length - 1) {
      comma && push(", ");
    }
  }
}

我们先来看看此时的nodes参数，如下图：

nodes

这里的nodes就是调用genNodeList函数时传的数组：[tag, props, children, patchFlag, dynamicProps]，只是将数组中的undefined转换成了null。

  • nodes数组中的第一项为字符串p，表示当前节点是p标签。

  • 由于当前p标签没有props，所以第二项为null的字符串。

  • 第三项为p标签子节点：{{msg}}

  • 第四项也是一个字符串，标记当前节点是否是动态节点。

在讲genNodeList函数之前，我们先来看一下如何使用h函数生成一个<p>{{ msg }}</p>标签的虚拟DOM节点。根据vue官网的介绍，h函数定义如下：

// 完整参数签名
function h(
  type: string | Component,
  props?: object | null,
  children?: Children | Slot | Slots
): VNode

h函数接收的第一个参数是标签名称或者一个组件，第二个参数是props对象或者null，第三个参数是子节点。

所以我们要使用h函数生成demo中的p标签虚拟DOM节点代码如下：

h("p", null, msg)

h函数生成虚拟DOM实际就是调用的createBaseVNode函数，而我们这里的createElementBlock函数生成虚拟DOM也是调用的createBaseVNode函数。两者的区别是createElementBlock函数多接收一些参数，比如patchFlag和dynamicProps。

现在我想你应该已经反应过来了，为什么调用genNodeList函数时传入的第一个参数nodes为：[tag, props, children, patchFlag, dynamicProps]。这个数组的顺序就是调用createElementBlock函数时传入的参数顺序。

所以在genNodeList中会遍历nodes数组生成调用createElementBlock函数需要传入的参数。

先来看第一个参数tag，这里tag的值为字符串"p"。所以在for循环中会执行push(node)，生成调用createElementBlock函数的第一个参数"p"。在debug终端看看此时的render函数，如下图：

arg1

从上图中可以看到createElementBlock函数的第一个参数"p"

接着来看nodes数组中的第二个参数：props，由于p标签中没有props属性。所以第二个参数props的值为字符串"null"，在for循环中同样会执行push(node)，生成调用createElementBlock函数的第二个参数"null"。在debug终端看看此时的render函数，如下图：

arg2

从上图中可以看到createElementBlock函数的第二个参数null

接着来看nodes数组中的第三个参数：children，由于children是一个对象，所以以当前children节点作为参数执行genNode函数。

这个genNode函数前面已经执行过一次了，当时是以根节点的codegenNode属性作为参数执行的。回顾一下genNode函数的代码，如下：

function genNode(node, context) {
  switch (node.type) {
    case NodeTypes.SIMPLE_EXPRESSION:
      genExpression(node, context)
      break
    case NodeTypes.INTERPOLATION:
      genInterpolation(node, context);
      break;
    case NodeTypes.VNODE_CALL:
      genVNodeCall(node, context);
      break;
  }
}

前面我们讲过了NodeTypes.INTERPOLATION类型表示当前节点是双大括号节点，而我们这次执行genNode函数传入的p标签children，刚好就是{{msg}}双大括号节点。所以代码会走到genInterpolation函数中。

genInterpolation函数

将断点走进genInterpolation函数中，genInterpolation代码如下：

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

首先会执行push方法向render函数中插入一个_todisplayString函数调用，在debug终端看看执行完这个push方法后的render函数，如下图：

toDisplayString

从上图中可以看到此时createElementBlock函数的第三个参数只生成了一半，调用_todisplayString函数传入的参数还没生成。

接着会以node.content作为参数执行genNode(node.content, context);生成_todisplayString函数的参数，此时代码又走回了genNode函数。

将断点再次走进genNode函数，看看此时的node是什么样的，如下图：

simple-expression

从上图中可以看到此时的node节点是一个简单表达式节点，表达式为：$setup.msg。所以代码会走进genExpression函数。

genExpression函数

接着将断点走进genExpression函数中，genExpression函数中的代码如下：

function genExpression(node, context) {
  const { content, isstatic } = node;
  context.push(
    isstatic ? JSON.stringify(content) : content,
    -3 /* UnkNown */,
    node
  );
}

由于当前的msg变量是一个ref响应式变量，所以isstatic为false。所以会执行push方法，将$setup.msg插入到render函数中。

执行完push方法后，在debug终端看看此时的render函数字符串是什么样的，如下图：

after-expression

从上图中可以看到此时的render函数基本已经生成了，剩下的就是调用push方法生成各个函数的右括号")"和右花括号"}"。将断点逐层走出，直到generate函数中。代码如下：

function generate(ast) {
  // ...省略
  genNode(ast.codegenNode, context);

  deindent();
  push(`}`);
  return {
    ast,
    code: context.code,
  };
}

执行完最后一个 push方法后，在debug终端看看此时的render函数字符串是什么样的，如下图：

render

从上图中可以看到此时的render函数终于生成啦！

总结

这是我画的我们这个场景中generate生成render函数的流程图：

full-progress

关注（图1）公众号：【前端欧阳】，解锁我更多vue原理文章。
加我（图2）微信回复「666」，免费领取欧阳研究vue源码过程中收集的源码资料，欧阳写文章有时也会参考这些资料。同时让你的朋友圈多一位对vue有深入理解的人。

公众号

微信

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

vue3的defineAsyncComponent是如何实现异步组件的呢？
这篇文章我们将通过debug源码的方式来带你搞清楚defineAsyncComponent是如何实现异步组件的
这年头，好好分享前端高质量文章也要被怼
欧阳老老实实的更新自己的高质量vue源码文章，还被某2.6k star的开源大佬给怼了。被怼了后气不过把截图（未打码）发粉丝群和朋友圈，结果发现还免费给他的开源项目打广告了。欧阳真的是越想越气
Vue3.5中解构props，让父子组件通信更加丝滑
前言 在Vue3.5版本中响应式 Props 解构终于正式转正了，这个功能之前一直是试验性的。这篇文章来带你搞清楚，一个String类型的props经过解构后明明应该是一个常量了，为什么还没丢失响应式呢？本文中使用的Vue版本为...
用了组合式 (Composition) API 后代码变得更乱了，怎么办？
组合式 (Composition) API 的一大特点是“非常灵活”，但也因为非常灵活，也可能导致我们的代码变得愈发混乱，最终到达无法维护的地步。
最近很火的Vue Vine是如何实现一个文件中写多个组件
相信你最近应该看到了不少介绍Vue Vine的文章，这篇文章我们另辟蹊径来讲讲Vue Vine是如何实现在一个文件里面写多个vue组件。
牛逼！在Vue3.5中仅仅2分钟就能封装一个自动cancel的fetch函数
前言 在欧阳的上一篇 这应该是全网最详细的Vue3.5版本解读文章中有不少同学对Vue3.5新增的onWatcherCleanup有点疑惑，这个新增的API好像和watch API回调的第三个参数onCleanup功能好像重复了。今天这篇文章来讲讲新增...
想看源码但是无从下口怎么办？
相信不少同学都有欧阳这种情况，年初的时候给自己制定了一份关于学习英语和源码的详细年度计划。但是到了实际执行的时候因为各种情况制定的计划基本都没有完成，年底回顾时发现年初制定的计划基本都没完成。痛定思痛...
给我5分钟，保证教会你在vue3中动态加载远程组件
前言 在一些特殊的场景中（比如低代码、减少小程序包体积、类似于APP的热更新），我们需要从服务端动态加载.vue文件，然后将动态加载的远程vue组件渲染到我们的项目中。今天这篇文章我将带你学会，在vue3中如何去动态...
React的useId，现在Vue3.5终于也有了！
前言 React在很早之前的版本中加了useId，用于生成唯一ID。在Vue3.5版本中，终于也有了期待已久的useId。这篇文章来带你搞清楚useId有哪些应用场景，以及他是如何实现的。 关注公众号：【前端欧阳】，给自己一个进阶...
卧槽，牛逼！vue3的组件竟然还能“暂停”渲染！
有没有一种完美的方案，从服务端获取数据的逻辑放在子组件中，并且在获取数据的期间让子组件“暂停”一下，先不去渲染，等到数据请求完成后再第一次去渲染子组件呢？
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native