終於搞懂了！原來 Vue 3 的 generate 是這樣生成 render 函式的

前端欧阳發表於2024-05-20

前言

在之前的面試官：來說說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上下文物件。
執行genModulePreamble函式生成：import { xxx } from "vue";
生成render函式中的函式名稱和引數，也就是function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
生成render函式中return的內容

`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函式。

code屬性：當前生成的render函式字串。
indentLevel屬性：當前的鎖進級別，每個級別對應兩個空格的鎖進。
helper方法：返回render函式中使用到的vue包中export匯出的函式名稱，比如返回openBlock、createElementBlock等函式
push方法：向當前的render函式字串後插入字串code。
indent方法：插入換行符，並且增加一個鎖進。
deindent方法：減少一個鎖進，或者插入一個換行符並且減少一個鎖進。
newline方法：插入換行符。

生成`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函式，如下圖：

從上圖中可以看到此時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

執行genModulePreamble函式生成：import { xxx } from "vue";
簡單字串拼接生成render函式中的函式名稱和引數，也就是function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
以根節點的codegenNode屬性為引數呼叫genNode函式生成render函式中return的內容。
- 此時傳入的是虛擬節點，執行genVNodeCall函式生成return _openBlock(), _createElementBlock(和呼叫genNodeList函式，生成createElementBlock函式的引數。
- 處理p標籤的tag標籤名和props，生成createElementBlock函式的第一個和第二個引數。此時render函式return的內容為：return _openBlock(), _createElementBlock("p", null
- 處理p標籤的children也就是{{msg}}節點，再次呼叫genNode函式。此時node節點型別為雙大括號節點，呼叫genInterpolation函式。
- 在genInterpolation函式中會先呼叫push方法，此時的render函式return的內容為：return _openBlock(), _createElementBlock("p", null, _toDisplayString(。然後以node.content為引數再次呼叫genNode函式。
- node.content為$setup.msg，是一個簡單表示式節點，所以在genNode函式中會呼叫genExpression函式。執行完genExpression函式後，此時的render函式return的內容為：return _openBlock(), _createElementBlock("p", null, _toDisplayString($setup.msg
- 呼叫push方法生成各個函式的右括號")"和右花括號"}"，生成最終的render函式

關注（圖1）公眾號：【前端歐陽】，解鎖我更多vue原理文章。
加我（圖2）微信回覆「666」，免費領取歐陽研究vue原始碼過程中收集的原始碼資料，歐陽寫文章有時也會參考這些資料。同時讓你的朋友圈多一位對vue有深入理解的人。

終於搞懂了！原來vue3中template使用ref無需.value是因為這個
2024-06-07
Vue
記錄--終於搞懂了！原來vue3中template使用ref無需.value是因為這個
2024-07-27
Vue
虛擬偶像的歌聲原來是這樣生成的！
2022-07-26
CyclicBarrier原來是這樣的
2020-10-13
何時/如何使用 Vue3 render 函式
2020-07-23
Vue函式
掉了兩根頭髮後，我悟了！vue3的scoped原來是這樣避免樣式汙染（下）
2024-07-04
Vue
掉了兩根頭髮後，我悟了！vue3的scoped原來是這樣避免樣式汙染（上）
2024-06-27
Vue
Vue核心知識-Vue的元件之render函式
2018-09-08
Vue元件函式
原來你是這樣的switch~
2019-01-19
原來你是這樣的Flutter
2020-04-22
Flutter
原來你是這樣的Promise
2018-04-15
Promise
Vue-render函式的三個引數
2018-11-20
Vue函式
JavaScript 中的原型原來是這樣的
2019-03-09
JavaScript原型
【Spring】原來SpringBoot是這樣玩的
2020-06-29
Spring Boot
原來JavaScript是這樣執行的
2019-02-19
JavaScript
原來Stable Diffusion是這樣工作的
2024-06-06
看不懂來打我，vue3如何將template編譯成render函式
2024-04-12
Vue編譯函式
懂了！VMware/KVM/Docker原來是這麼回事兒
2020-06-30
Docker
Vue筆記之render函式(一):render: h => h(App)
2018-10-14
Vue筆記函式APP
Vue 中 render 函式有點意思
2020-02-27
Vue函式
原來CNN是這樣提取影像特徵的。。。
2018-11-27
CNN特徵
原來你是這樣的http2......
2018-09-05
HTTP
From Java To Kotlin：空安全、擴充套件、函式、Lambda很詳細，這次終於懂了
2023-05-20
JavaKotlin套件函式
Vue原始碼探祕（五）（_render 函式的實現）
2020-03-23
Vue原始碼函式
會使用基本的Render函式後，就會想，這怎麼用 v-for/v-if/v-model;我寫個vue Render函式進階...
2018-07-07
函式Vue
程式媛眼中的程式猿原來是這樣子的！
2018-08-20
關於Socket，看我這幾篇就夠了(三)原來你是這樣的Websocket
2019-02-11
Web
PostgreSQL的generate_series函式應用
2024-03-07
SQL函式
原來你是這樣的Websocket--抓包分析
2018-05-10
Web
Render函式在Vue多頁面應用中的應用
2018-11-14
函式Vue
女程式設計師是這樣被惡搞的
2018-08-19
程式設計師
vue.js 實踐總結（二）Render 函式
2018-07-18
Vue.js函式
探索React Hooks：原來它們是這樣誕生的！
2023-05-15
ReactHook
2. 媽呀，Jackson原來是這樣寫JSON的
2020-07-24
JSON
原來YouTube推薦系統的內幕是這樣……
2019-03-04
CSS 之原來你是這樣子的: first-child
2019-02-19
CSS
Django中 render() 函式的使用方法
2021-04-21
Django函式
實戰技巧，Vue原來還可以這樣寫
2020-06-29
Vue

終於搞懂了！原來 Vue 3 的 generate 是這樣生成 render 函式的

前言

看個demo

generate函式

context上下文物件

生成import {xxx} from "vue"

生成render函式中的函式名稱和引數

生成render函式中return的內容

genVNodeCall函式

genNodeList函式

genInterpolation函式

genExpression函式

總結