剖析 Vue 3 源码中 `createVNode` 函数的参数和核心逻辑，以及它如何从模板编译结果生成 VNode。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue 3 源码剖析：`createVNode` 的奥秘与模板编译的桥梁

各位观众，晚上好！我是今天的讲师，很高兴能和大家一起探索 Vue 3 源码中 createVNode 这个神奇的函数。咱们今天不搞虚的，直接上手，把这个 Vue 3 里的“造物主”扒个底朝天，看看它到底是怎么把模板变成我们页面上的“砖头瓦块”。

一、`createVNode` 是什么？为啥重要？

简单来说，createVNode 是 Vue 3 虚拟 DOM (VNode) 的核心构造函数。它接收各种参数，然后创建一个描述组件、元素或文本节点的 VNode 对象。想象一下，我们用 Vue 写一个组件，最终浏览器里显示的是 HTML。但是 Vue 不会直接操作真实的 DOM，而是先创建一个虚拟 DOM，也就是 VNode。然后 Vue 的 diff 算法会比较新旧 VNode，找出需要更新的部分，最后才更新真实 DOM。 createVNode 就负责把组件、元素等信息变成 VNode 这个“中间状态”。

它之所以重要，是因为：

它是 Vue 组件渲染流程的起点。 所有组件最终都会被渲染成 VNode。
它是 Vue 响应式系统和 DOM 更新的桥梁。 通过 VNode，Vue 才能高效地更新 DOM。
理解 createVNode 有助于我们深入理解 Vue 的内部机制。 了解了 VNode 的创建过程，就能更好地理解 Vue 的性能优化策略。

二、`createVNode` 的参数：一个也不能少

createVNode 函数的参数非常多，但每一个都有它的意义。我们先来看一下 createVNode 的函数签名（简化版）：

function createVNode(
  type: VNodeTypes | ClassComponent | FunctionComponent | string,
  props?: Data | null,
  children?: Children | null,
  patchFlag?: number,
  dynamicProps?: string[],
  shapeFlag?: number
): VNode

别慌，我们一个一个来看：

参数名	类型	描述	举例
`type`	`VNodeTypes \| ClassComponent \| FunctionComponent \| string`	VNode 的类型，可以是组件、元素、文本节点等。	`'div'`, `MyComponent`, `Text`
`props`	`Data \| null`	VNode 的属性，是一个对象，包含组件的 props 或 HTML 元素的 attributes。	`{ id: 'my-div', class: 'container', onClick: () => {} }`
`children`	`Children \| null`	VNode 的子节点，可以是 VNode 数组、文本字符串，或者是一个函数 (在渲染函数组件时使用)。	`'Hello'`, `[createVNode('span', null, 'World')]`, `() => createVNode('div', null, 'Lazy Content')`
`patchFlag`	`number`	一个数字，表示 VNode 的动态属性的类型。用于优化 patch 过程，只更新需要更新的部分。	`PatchFlags.TEXT`, `PatchFlags.CLASS`
`dynamicProps`	`string[]`	一个字符串数组，包含动态属性的键名。用于优化 patch 过程，只更新需要更新的部分。	`['class', 'style']`
`shapeFlag`	`number`	一个数字，表示 VNode 的形状。用于快速判断 VNode 的类型和结构，例如是元素节点、组件节点、文本节点等。	`ShapeFlags.ELEMENT`, `ShapeFlags.COMPONENT`

可能有些同学对 patchFlag 和 shapeFlag 这两个参数比较陌生。简单来说，它们是 Vue 3 为了优化性能而引入的。 patchFlag 告诉 Vue diff 算法哪些属性是动态的，需要进行比较和更新。 shapeFlag 告诉 Vue 这个 VNode 是什么类型的，可以更快地进行处理。

三、`createVNode` 的核心逻辑：化腐朽为神奇

createVNode 的核心逻辑可以概括为以下几个步骤：

规范化参数： 对传入的参数进行类型检查和规范化，确保参数的格式正确。
创建 VNode 对象： 创建一个 JavaScript 对象，包含 VNode 的所有属性，例如 type、props、children、patchFlag、shapeFlag 等。
设置 shapeFlag： 根据 type 和 children 的类型，设置 shapeFlag，用于快速判断 VNode 的类型和结构。
返回 VNode 对象： 返回创建好的 VNode 对象。

我们来看一段简化版的 createVNode 代码（省略了一些细节）：

function createVNode(
  type: VNodeTypes | ClassComponent | FunctionComponent | string,
  props?: Data | null,
  children?: Children | null,
  patchFlag?: number,
  dynamicProps?: string[]
): VNode {
  const vnode: VNode = {
    __v_isVNode: true, // 标记这是一个 VNode
    type,
    props,
    children,
    shapeFlag: 0,
    patchFlag: patchFlag || 0,
    dynamicProps,
    appContext: null,
    component: null,
    dirs: null,
    el: null,
    key: props?.key, // key 属性用于优化列表渲染
  };

  normalizeChildren(vnode, children); // 规范化 children

  if (typeof type === 'string') {
    vnode.shapeFlag |= ShapeFlags.ELEMENT;
  } else if (isObject(type)) {
    if (isFunction(type)) {
      vnode.shapeFlag |= ShapeFlags.FUNCTIONAL_COMPONENT;
    } else {
      vnode.shapeFlag |= ShapeFlags.STATEFUL_COMPONENT;
    }
  }

  return vnode;
}

function normalizeChildren(vnode: VNode, children: Children | null) {
  if (typeof children === 'string') {
    vnode.shapeFlag |= ShapeFlags.TEXT_CHILDREN;
  } else if (Array.isArray(children)) {
    vnode.shapeFlag |= ShapeFlags.ARRAY_CHILDREN;
  }
}

这段代码做了什么呢？

首先，它创建了一个 VNode 对象，并初始化了一些属性。
然后，它调用 normalizeChildren 函数来规范化 children。规范化的过程就是根据 children 的类型设置 shapeFlag。例如，如果 children 是一个字符串，那么 shapeFlag 就会包含 ShapeFlags.TEXT_CHILDREN。
接着，它根据 type 的类型设置 shapeFlag。如果 type 是一个字符串，那么 shapeFlag 就会包含 ShapeFlags.ELEMENT。如果 type 是一个组件，那么 shapeFlag 就会包含 ShapeFlags.COMPONENT。
最后，它返回创建好的 VNode 对象。

四、模板编译：从字符串到 VNode 的旅程

我们知道，我们写 Vue 组件的时候，通常会用模板 (template) 来描述组件的结构。但是浏览器只能识别 HTML，不能直接识别 Vue 模板。所以，Vue 需要把模板编译成 JavaScript 代码，才能创建 VNode。

模板编译的过程可以分为以下几个步骤：

解析 (parse)： 将模板字符串解析成抽象语法树 (AST)。 AST 是一个树形结构，用于表示模板的结构。
转换 (transform)： 对 AST 进行转换，例如处理指令、表达式等。
生成 (generate)： 将转换后的 AST 生成 JavaScript 代码。

我们来看一个简单的例子：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="increment">Count is: {{ count }}</button>
  </div>
</template>

这段模板会被编译成类似下面的 JavaScript 代码：

import { createVNode, toDisplayString } from 'vue';

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (createVNode("div", { id: "app" }, [
    createVNode("h1", null, toDisplayString(_ctx.message), 1 /* TEXT */),
    createVNode("button", { onClick: _ctx.increment }, "Count is: " + toDisplayString(_ctx.count), 1 /* TEXT */)
  ]));
}

可以看到，模板中的 div、h1、button 元素都被转换成了 createVNode 函数的调用。模板中的 {{ message }} 和 {{ count }} 表达式都被转换成了 toDisplayString(_ctx.message) 和 toDisplayString(_ctx.count)。模板中的 @click="increment" 指令被转换成了 onClick: _ctx.increment。

这段 JavaScript 代码会在组件渲染的时候被执行，生成 VNode。

五、`createVNode` 与模板编译的协同：珠联璧合

createVNode 和模板编译是 Vue 组件渲染流程中两个关键的环节。模板编译负责将模板字符串转换成 JavaScript 代码，createVNode 负责将 JavaScript 代码转换成 VNode。它们之间的关系可以用下图来表示：

+---------------------+     +---------------------+     +---------------------+
|      模板字符串      | --> |      模板编译       | --> |   JavaScript 代码   |
+---------------------+     +---------------------+     +---------------------+
                           |                       |     |  (包含 createVNode)  |
                           |                       |     +---------------------+
                           |                       |             |
                           |                       |             V
                           |                       |     +---------------------+
                           |                       | --> |       createVNode      |
                           |                       |     +---------------------+
                           |                       |             |
                           |                       |             V
                           |                       |     +---------------------+
                           |                       | --> |        VNode        |
                           +---------------------+     +---------------------+

可以看到，模板编译是 createVNode 的上游，createVNode 是模板编译的下游。它们协同工作，才能将模板转换成最终的 VNode。

六、案例分析：手写一个简单的 `createVNode`

为了更好地理解 createVNode 的工作原理，我们来手写一个简单的 createVNode 函数。这个函数只支持创建元素节点和文本节点，不支持创建组件节点。

function simpleCreateVNode(
  type: string,
  props?: Data | null,
  children?: Children | null
): VNode {
  const vnode: VNode = {
    __v_isVNode: true,
    type,
    props,
    children,
    shapeFlag: 0,
    patchFlag: 0,
    dynamicProps: null,
    appContext: null,
    component: null,
    dirs: null,
    el: null,
    key: props?.key,
  };

  if (typeof type === 'string') {
    vnode.shapeFlag |= ShapeFlags.ELEMENT;
  }

  if (typeof children === 'string') {
    vnode.shapeFlag |= ShapeFlags.TEXT_CHILDREN;
  } else if (Array.isArray(children)) {
    vnode.shapeFlag |= ShapeFlags.ARRAY_CHILDREN;
  }

  return vnode;
}

这个 simpleCreateVNode 函数的逻辑和 Vue 3 的 createVNode 函数类似，只是省略了一些细节。我们可以用它来创建简单的 VNode：

const vnode = simpleCreateVNode('div', { id: 'my-div' }, 'Hello World');
console.log(vnode);

这段代码会创建一个 div 元素，id 为 my-div，文本内容为 Hello World 的 VNode。

七、总结与思考：冰山一角

今天我们一起探索了 Vue 3 源码中 createVNode 函数的奥秘。我们了解了 createVNode 的参数和核心逻辑，以及它如何与模板编译协同工作，将模板转换成 VNode。

createVNode 只是 Vue 3 庞大源码中的冰山一角。但是，理解 createVNode 有助于我们深入理解 Vue 的内部机制，更好地使用 Vue 进行开发。

希望今天的讲座对大家有所帮助！谢谢大家！

Vue 3 源码剖析：createVNode 的奥秘与模板编译的桥梁

一、createVNode 是什么？为啥重要？

二、createVNode 的参数：一个也不能少

三、createVNode 的核心逻辑：化腐朽为神奇

四、模板编译：从字符串到 VNode 的旅程

五、createVNode 与模板编译的协同：珠联璧合

六、案例分析：手写一个简单的 createVNode