剖析 Vue 3 源码中 `createVNode` 函数的参数和核心逻辑，以及它如何从模板编译结果生成 VNode。

各位观众老爷，晚上好！今天咱们就来扒一扒 Vue 3 源码里的“造物主”—— createVNode 函数。这玩意儿是 Vue 整个虚拟 DOM 的核心，可以说没有它，啥 UI 渲染都是白搭。

咱们的目标是：

1. 搞清楚 createVNode 接收哪些参数，每个参数都干啥的。
2. 研究 createVNode 内部的核心逻辑，看看它是怎么“凭空捏造”出一个 VNode 的。
3. 了解模板编译后，createVNode 是如何被调用的，以及它是如何利用编译结果生成 VNode 的。

准备好了吗？发车！

一、createVNode：参数大揭秘

createVNode 函数的参数乍一看有点多，但别慌，咱们一个一个来。它的完整签名如下：

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

来，上表格：

参数名	类型	作用
type	VNodeTypes | ClassComponent | FunctionComponent | ComponentOptions	VNode 的类型，可以是 HTML 标签名（’div’, ‘span’），组件对象，函数式组件，或者一些特殊的 VNode 类型（Fragment, Text, Comment, Static）。
props	Data | null	传递给组件的 props 或者 HTML 元素的 attributes。
children	VNodeNormalizedChildren | null	VNode 的子节点。可以是字符串，VNode 数组，或者一个函数（用于 slots）。
patchFlag	number	优化用的标识，告诉 Vue 在 diff 算法中哪些地方需要重点关注。不同的 patchFlag 代表不同的变化类型，可以避免不必要的 DOM 操作。
dynamicProps	string[] | null	只有在使用了 patchFlag 的情况下才有效。它是一个字符串数组，包含了动态绑定的 props 的 key。用于更精确地 diff props。
shapeFlag	number	一个二进制的标志位，用于描述 VNode 的形状。例如，它是否是一个组件，是否有子节点，子节点是文本还是数组等等。
isBlockNode	boolean	标记当前 VNode 是否是 block 的根节点。block 是 Vue 3 中用于静态提升和缓存的一种优化机制。
needFullChildrenNormalization	boolean	标记是否需要对子节点进行完全的标准化处理。通常在处理 slots 的时候会用到。

怎么样，是不是感觉稍微清晰了一点？别急，咱们再来举几个例子：

• 创建一个简单的 div 元素：

createVNode('div', { id: 'my-div' }, 'Hello, world!')

这里 type 是 'div'，props 是 { id: 'my-div' }，children 是 'Hello, world!'。

• 创建一个组件：

import MyComponent from './MyComponent.vue'

createVNode(MyComponent, { name: 'Alice' })

这里 type 是 MyComponent，props 是 { name: 'Alice' }，children 默认为 null（除非组件有默认 slot）。

• 创建一个带插槽的组件：

import MyComponent from './MyComponent.vue'

createVNode(MyComponent, { name: 'Alice' }, {
  default: () => createVNode('span', null, 'Default Slot Content'),
  header: () => createVNode('h1', null, 'Header Slot Content')
})

这里 children 是一个对象，包含了具名插槽的渲染函数。

二、createVNode：核心逻辑剖析

createVNode 内部的逻辑其实并不复杂，主要就是组装 VNode 对象，并设置一些标志位。咱们简化一下，看看核心部分：

function createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, shapeFlag = 0, isBlockNode = false, needFullChildrenNormalization = false) {
  // 1. 处理 props
  if (props) {
    // ... 省略 props 的标准化处理，例如处理 class 和 style
  }

  // 2. 确定 shapeFlag
  if (typeof type === 'string') {
    shapeFlag |= 1 /* ELEMENT */;
  } else if (isObject(type)) {
    shapeFlag |= 4 /* STATEFUL_COMPONENT */; // 这里简化了组件类型的判断
  }

  // 3. 处理 children
  if (children) {
    if (typeof children === 'string' || typeof children === 'number') {
      shapeFlag |= 8 /* TEXT_CHILDREN */;
    } else if (isArray(children)) {
      shapeFlag |= 16 /* ARRAY_CHILDREN */;
    } else if (isObject(children)) {
      shapeFlag |= 32 /* SLOTS_CHILDREN */;
    }
  }

  // 4. 创建 VNode 对象
  const vnode = {
    __v_isVNode: true,
    type,
    props,
    children,
    shapeFlag,
    patchFlag,
    dynamicProps,
    appContext: null, // will be injected during render
    dirs: null,
    transition: null,
    el: null, // 对应的真实 DOM 元素
    anchor: null, // Fragment 的 anchor
    component: null, // 组件实例
    suspense: null,
    ssContent: null,
    ssFallback: null,
    scopeId: null,
    keepAliveContext: null
  };

  return vnode;
}

咱们来解读一下：

1. 处理 props： 这里会对 props 进行标准化处理，例如将 class 和 style 转换为统一的格式。这部分代码比较繁琐，咱们先忽略。
2. 确定 shapeFlag： shapeFlag 是一个非常重要的标志位，它决定了 VNode 的形状。根据 type 和 children 的类型，shapeFlag 会被设置为不同的值。
   • ELEMENT：表示这是一个 HTML 元素。
   • STATEFUL_COMPONENT：表示这是一个有状态组件。
   • TEXT_CHILDREN：表示子节点是文本。
   • ARRAY_CHILDREN：表示子节点是数组。
   • SLOTS_CHILDREN：表示子节点是插槽。
3. 处理 children： 根据 children 的类型，设置对应的 shapeFlag。
4. 创建 VNode 对象： 最后，创建一个 VNode 对象，并将所有的参数都设置到 VNode 对象上。

重点：shapeFlag 的作用

shapeFlag 的作用非常重要，它告诉 Vue 这个 VNode 是什么类型的，以及它有哪些特点。在后续的 diff 算法中，Vue 会根据 shapeFlag 来选择不同的优化策略。例如，如果 shapeFlag 包含了 TEXT_CHILDREN，那么 Vue 就会知道这个 VNode 的子节点是文本，可以直接进行文本更新，而不需要进行更复杂的 diff 操作。

三、模板编译与 createVNode 的关系

Vue 的模板会被编译成渲染函数（render function）。渲染函数的作用就是生成 VNode 树。在渲染函数中，createVNode 会被频繁调用，用于创建各种各样的 VNode。

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

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

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = 'Hello, Vue!'
    const count = ref(0)
    const increment = () => {
      count.value++
    }

    return {
      message,
      count,
      increment
    }
  }
}
</script>

这段代码会被编译成如下的渲染函数（简化版）：

import { createVNode, toDisplayString, openBlock, createElementBlock } from 'vue'

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

咱们来解读一下：

• openBlock 和 createElementBlock 是 Vue 编译器插入的辅助函数，用于创建 block 节点，进行静态提升和缓存。咱们先忽略它们。
• createVNode("div", { id: "app" }, ...)：创建根节点 div。
• createVNode("h1", null, toDisplayString(_ctx.message), 1 /* TEXT */)：创建 h1 元素，并将 message 插值到文本节点中。patchFlag 为 1 /* TEXT */，表示这是一个文本节点，只需要更新文本内容。
• createVNode("button", { onClick: _ctx.increment }, "Count: " + toDisplayString(_ctx.count), 9 /* TEXT, PROPS */)：创建 button 元素，并绑定 click 事件和插值 count 到文本节点中。patchFlag 为 9 /* TEXT, PROPS */，表示既有文本更新，又有 props 更新。

可以看到，模板编译的结果就是一系列 createVNode 函数的调用。这些调用会按照模板的结构，生成一棵 VNode 树。

四、深入 patchFlag：性能优化的秘密武器

patchFlag 是 Vue 3 中一个非常重要的优化手段。它是一个数字，代表了 VNode 的变化类型。Vue 在 diff 算法中，会根据 patchFlag 来选择不同的更新策略，从而避免不必要的 DOM 操作。

常见的 patchFlag 值如下：

值	含义
0	没有动态属性，完全静态的节点。
1	文本节点，只需要更新文本内容。
2	动态 class。
4	动态 style。
8	动态 props，但不包含 class 和 style。
9	TEXT | PROPS，既有文本更新，又有 props 更新。
10	CLASS | PROPS，既有 class 更新，又有 props 更新。
12	STYLE | PROPS，既有 style 更新，又有 props 更新。
16	带有 key 的子节点，用于优化列表渲染。
32	非 key 的子节点。
64	带有 ref 属性。
128	事件监听器。
256	需要进行完整 props 检查的组件。
512	动态 slots。
1024	静态节点，需要完整 diff。
-1	需要完整 diff 的节点（例如，动态组件）。

例如，如果 patchFlag 为 1 /* TEXT */，那么 Vue 在 diff 的时候，只需要更新文本内容即可，不需要比较其他的属性，从而大大提高了性能。

五、dynamicProps：更精确的 Props Diff

dynamicProps 是一个字符串数组，包含了动态绑定的 props 的 key。它只有在使用了 patchFlag 的情况下才有效。dynamicProps 可以让 Vue 更精确地 diff props，避免不必要的更新。

例如：

<template>
  <div :id="id" :class="className" :style="style" :data-index="index"></div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const id = ref('my-div')
    const className = ref('container')
    const style = ref({ color: 'red' })
    const index = ref(0)

    return {
      id,
      className,
      style,
      index
    }
  }
}
</script>

这段代码会被编译成如下的渲染函数（简化版）：

import { createVNode, openBlock, createElementBlock } from 'vue'

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createElementBlock("div", {
    id: _ctx.id,
    class: _ctx.className,
    style: _ctx.style,
    "data-index": _ctx.index
  }, null, 10 /* CLASS, PROPS */, ["id", "class", "style", "data-index"]))
}

可以看到，createVNode 的最后一个参数是 ["id", "class", "style", "data-index"]，这就是 dynamicProps。它告诉 Vue 只有这几个 props 是动态的，需要进行 diff。

六、总结

今天咱们一起深入剖析了 Vue 3 源码中的 createVNode 函数。咱们了解了它的参数，核心逻辑，以及它与模板编译的关系。咱们还深入研究了 patchFlag 和 dynamicProps 这两个性能优化的秘密武器。

希望今天的讲解对你有所帮助。下次再见！