Vue 3 源码漫游：normalizeVNode——VNode界的“变形金刚”
大家好！我是你们今天的导游，带着大家一起“考古” Vue 3 的源码。今天我们要扒的是一个非常重要但又常常被忽略的函数——normalizeVNode。 它是 VNode 界的“变形金刚”，专门负责把各种形态的 VNode，“揉捏”成统一的标准格式。
为什么要“标准化” VNode？
在 Vue 的世界里，组件最终会被渲染成一颗虚拟 DOM 树，而组成这棵树的基本单元就是 VNode（Virtual Node）。VNode 可以理解为对真实 DOM 节点的一个轻量级描述，它包含了节点类型、属性、子节点等等信息。
但是，在实际开发中，我们创建 VNode 的方式可能会千奇百怪：
- 直接使用
h函数创建： 这是最常见的方式，你可以显式地指定节点类型、属性和子节点。 - 组件渲染函数返回： 组件的
render函数会返回一个 VNode，描述组件应该如何渲染。 slots插槽内容： 插槽内容可以是 VNode，也可以是文本节点、甚至是多个 VNode 的数组。- 异步组件： 异步组件在加载完成前，可能会返回一个占位 VNode。
这些不同来源、不同形式的 VNode，如果直接拿去渲染，可能会导致各种问题。比如，有的 VNode 没有 type 属性，有的子节点是字符串而不是 VNode，有的甚至是个 null 或者 undefined。
为了解决这些问题，Vue 引入了 normalizeVNode 函数，它的作用就是把各种“非标准”的 VNode 转换成标准的、统一的格式，方便后续的渲染流程处理。
normalizeVNode 的“变形”技巧
接下来，我们来看看 normalizeVNode 是如何进行“变形”的。为了方便理解，我们先简化一下源码，只保留核心逻辑：
function normalizeVNode(child) {
if (typeof child === 'string' || typeof child === 'number') {
// 情况 1：如果 child 是字符串或数字，创建一个文本 VNode
return createTextVNode(String(child));
} else if (Array.isArray(child)) {
// 情况 2：如果 child 是数组，创建一个 Fragment VNode (Vue 3 新增)
return createVNode(Fragment, null, child);
} else if (typeof child === 'object') {
// 情况 3：如果 child 是对象 (VNode)，直接返回
return child;
} else {
// 情况 4：其他情况，创建一个空 VNode
return createVNode(Comment);
}
}
// 创建文本 VNode 的函数
function createTextVNode(text) {
return {
type: Text,
children: text,
};
}
// 创建 VNode 的函数 (简化版)
function createVNode(type, props, children) {
return {
type: type,
props: props,
children: children,
};
}
// Fragment 和 Comment 的类型定义 (简化版)
const Fragment = Symbol('Fragment');
const Text = Symbol('Text');
const Comment = Symbol('Comment');可以看到，normalizeVNode 函数的核心逻辑就是对 child 进行类型判断，然后根据不同的类型进行不同的处理：
-
情况 1：
child是字符串或数字这种情况下，
normalizeVNode会调用createTextVNode函数，创建一个文本 VNode。文本 VNode 的type属性是Text，children属性是文本内容。normalizeVNode('Hello Vue!'); // 返回 { type: Text, children: 'Hello Vue!' } normalizeVNode(123); // 返回 { type: Text, children: '123' } -
情况 2：
child是数组Vue 3 引入了 Fragment VNode 的概念，它可以把多个 VNode 包裹在一个虚拟节点中，而不会在真实 DOM 中创建一个额外的元素。当
child是数组时，normalizeVNode会创建一个 Fragment VNode，把数组中的 VNode 作为 Fragment VNode 的子节点。normalizeVNode([ createVNode('h1', null, 'Title'), createVNode('p', null, 'Content'), ]); // 返回 { type: Fragment, props: null, children: [VNode_h1, VNode_p] } -
情况 3：
child是对象 (VNode)如果
child已经是一个 VNode 对象，normalizeVNode会直接返回它。这是最简单的情况，说明这个 VNode 已经是标准格式了。const vnode = createVNode('div', null, 'Hello'); normalizeVNode(vnode); // 返回 vnode -
情况 4：其他情况
如果
child是null、undefined或者其他类型，normalizeVNode会创建一个空的 Comment VNode。Comment VNode 在真实 DOM 中会被渲染成一个注释节点，可以用来占位或者做一些特殊处理。normalizeVNode(null); // 返回 { type: Comment, props: null, children: null } normalizeVNode(undefined); // 返回 { type: Comment, props: null, children: null }
normalizeVNode 在 Vue 3 中的应用场景
normalizeVNode 函数在 Vue 3 中被广泛应用，主要有以下几个场景：
-
slots插槽内容的处理： 当组件接收到插槽内容时，normalizeVNode会对插槽内容进行标准化处理，确保插槽内容是统一的 VNode 格式。<!-- ParentComponent.vue --> <template> <ChildComponent> <template #default> Hello from parent! </template> </ChildComponent> </template> <!-- ChildComponent.vue --> <template> <div> <slot></slot> </div> </template>在这个例子中，
ParentComponent通过插槽向ChildComponent传递内容。ChildComponent在渲染插槽内容时，会使用normalizeVNode对插槽内容进行标准化处理。 -
render函数返回值的处理： 组件的render函数可以返回各种形式的 VNode，normalizeVNode会对render函数的返回值进行标准化处理。// MyComponent.js export default { render() { return 'Hello from component!'; // 返回一个字符串 }, };在这个例子中，
MyComponent的render函数返回一个字符串。Vue 会自动调用normalizeVNode把这个字符串转换成一个文本 VNode。 -
v-if和v-for指令的处理：v-if和v-for指令在渲染时，可能会生成不同类型的 VNode，normalizeVNode会对这些 VNode 进行标准化处理。<template> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </template>在这个例子中，
v-for指令会根据items数组生成多个li元素。normalizeVNode会对每个li元素的 VNode 进行标准化处理。
深入源码：更完整的 normalizeVNode
上面我们只是简化了 normalizeVNode 的逻辑，方便大家理解。实际上，Vue 3 的 normalizeVNode 函数要复杂得多，它还需要处理一些特殊情况，比如：
Portal组件：Portal组件可以将 VNode 渲染到 DOM 树的指定位置，normalizeVNode需要处理Portal组件的 VNode。Suspense组件：Suspense组件可以处理异步组件的加载状态，normalizeVNode需要处理Suspense组件的 VNode。- KeepAlive 组件：
KeepAlive组件可以缓存组件的状态，normalizeVNode需要处理KeepAlive组件的 VNode。
下面是一个更完整的 normalizeVNode 函数的源码（简化版）：
function normalizeVNode(child) {
if (isObject(child)) {
if (isVNode(child)) {
// 如果已经是 VNode，直接返回
return child;
} else if (isPromise(child)) {
// 处理 Promise (异步组件)
return createVNode(Suspense, null, {
default: () => child,
fallback: createVNode(Comment),
});
} else if (isSlot(child)) {
//处理插槽
return createVNode(Fragment, null, [child()])
}
}
if (isDef(child)) {
return createVNode(Text, null, String(child));
} else {
return createVNode(Comment);
}
}
function isVNode(value) {
return typeof value === 'object' && value !== null && value.__v_isVNode === true
}
function isPromise(value){
return typeof value === 'object' && value !== null && typeof value.then === 'function'
}
function isDef(value){
return value !== undefined && value !== null
}
function isSlot(value){
return typeof value === 'function' && value.__v_isVNode !== true
}这个版本的 normalizeVNode 函数增加了对 Promise 和插槽的处理。当 child 是一个 Promise 对象时，normalizeVNode 会创建一个 Suspense 组件，把 Promise 对象作为 Suspense 组件的 default 插槽，并提供一个 fallback 插槽作为占位内容。当 child 是一个插槽函数的时候，会执行插槽函数，将返回值放入Fragment中。
总结
normalizeVNode 函数是 Vue 3 渲染流程中一个非常重要的环节，它的作用就是把各种形式的 VNode 转换成标准的、统一的格式，方便后续的渲染流程处理。
我们可以把 normalizeVNode 函数比作一个“VNode 标准化工厂”，它接收各种“原材料”（不同形式的 VNode），经过一系列的“加工”（类型判断和转换），最终输出“标准化产品”（统一格式的 VNode）。
理解 normalizeVNode 函数的原理，可以帮助我们更好地理解 Vue 3 的渲染流程，从而更好地使用 Vue 3 进行开发。
希望今天的“考古”之旅对大家有所帮助！下次有机会，我们再一起探索 Vue 3 源码的其他奥秘。