Vue3 源码：createVNode 创建虚拟节点实现

createVNode

组件渲染的第一步不是操作 DOM，而是先生成一份「描述」——虚拟节点。之所以要多这一层，是因为直接操作真实 DOM 代价高，而用普通 JS 对象描述结构后，更新时可以先在内存里比对新旧两份描述，算出最小的改动集，再一次性落到真实 DOM 上。

这篇实现的是这个链路最前面的 createVNode。它职责很单一：把用户传进来的参数收拢成一个固定结构的对象，不做任何 DOM 操作。理解它的关键是看清 type 字段——后续 patch 阶段正是靠这个字段的类型来分流的：字符串说明要渲染的是普通元素（'div'），对象说明是一个组件（组件选项对象）。

下面是这个函数的实现。

创建一个虚拟节点，虚拟节点的本质就是一个 js 对象，用这个 js 对象去描述一个 dom 节点的信息，最终通过转换成真实 dom

四个字段各有分工：type 决定渲染分支（元素还是组件），props 用 || {} 兜底成空对象，省掉后续每次访问前的判空；children 兼容字符串（文本子节点）和数组（多个子节点）两种形态；el 先占位为 null，等真实 DOM 创建出来后回填，后续更新和卸载时靠它找到对应的真实节点。

export const createVNode = function (
  type: any,
  props?: any,
  children?: string | Array<any>,
) {
  const vnode = {
    type,
    props: props || {},
    children,
    el: null,
  };

  return vnode;
};