Vue 3.0 进阶之 VNode 探秘

发布时间：2025-11-05 07:34:51 来源：创站工坊 作者：数据库

本文转载自微信公众号「全栈修仙之路」，进阶作者阿宝哥  。进阶转载本文请联系全栈修仙之路公众号。进阶

本文是进阶 Vue 3.0 进阶系列 的第五篇文章，在这篇文章中，进阶阿宝哥将介绍 Vue 3 中的进阶核心对象 —— VNode，该对象用于描述节点的进阶信息，它的进阶全称是虚拟节点(virtual node)。与 “虚拟节点” 相关联的进阶另一个概念是 “虚拟 DOM”，它是进阶我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。通常一个 Vue 应用会以一棵嵌套的进阶组件树的形式来组织：

(图片来源：https://v3.cn.vuejs.org/)

所以 “虚拟 DOM” 对 Vue 应用来说，是进阶至关重要的。而 “虚拟 DOM” 又是进阶由 VNode 组成的，它是进阶 Vue 底层的核心基石。接下来，云服务器提供商进阶阿宝哥将带大家一起来探索 Vue 3 中与 VNode 相关的一些知识。

一、VNode 长什么样?

在 runtime-core/src/vnode.ts 文件中，我们找到了 VNode 的类型定义。通过 VNode 的类型定义可知，VNode 本质是一个对象，该对象中按照属性的作用，分为 5 大类。这里阿宝哥只详细介绍其中常见的两大类型属性 —— 内部属性 和 DOM 属性：

1.1 内部属性

1.2 DOM 属性

1.3 suspense 属性

1.4 optimization 属性

1.5 应用上下文属性

二、如何创建 VNode?

要创建 VNode 对象的话，我们可以使用 Vue 提供的 h 函数。也许可以更准确地将其命名为 createVNode()，但由于频繁使用和简洁，它被称为 h() 。该函数接受三个参数：

观察以上代码可知， h 函数内部的主要处理逻辑就是根据参数个数和参数类型，IT技术网执行相应处理操作，但最终都是通过调用 createVNode 函数来创建 VNode 对象。在开始介绍 createVNode 函数前，阿宝哥先举一些实际开发中的示例：

示例一和示例二很明显都使用了 h 函数，而示例三并未看到 h 或 createVNode 函数的身影。为了一探究竟，我们需要借助 Vue 3 Template Explorer 这个在线工具来编译一下 "

<p>我是阿宝哥</p>" 模板，该模板编译后的结果如下（函数模式）：

由以上编译结果可知， "<p>我是阿宝哥</p>" 模板被编译生成了一个 render 函数，调用该函数后会返回 createBlock 函数的调用结果。其中 createBlock 函数的实现如下所示：

在 createBlock 函数内部，我们终于看到了 createVNode 函数的身影。顾名思义，该函数的作用就是用于创建 VNode，接下来我们来分析一下它。

三、createVNode 函数内部做了啥?

下面我们将从参数说明和逻辑说明两方面来介绍 createVNode 函数：

3.1 参数说明

在分析该函数的具体代码前，服务器托管我们先来看一下它的参数。该函数可以接收 6 个参数，这里阿宝哥用思维导图来重点介绍前面 2 个参数：

type 参数

由上图可知，type 参数支持很多类型，比如常用的 string、VNode 和 Component 等。此外，也有一些陌生的面孔，比如 Text、Comment 、Static 和 Fragment 等类型，它们的定义如下：

那么定义那么多的类型有什么意义呢?这是因为在 patch 阶段，会根据不同的 VNode 类型来执行不同的操作：

介绍完 type 参数后，接下来我们来看 props 参数，具体如下图所示：

props 参数

props 参数的类型是联合类型，这里我们来分析 Data & VNodeProps 交叉类型：

其中 Data 类型是通过 TypeScript 内置的工具类型 Record 来定义的：

而 VNodeProps 类型是通过类型别名来定义的，除了含有 key 和 ref 属性之外，其他的属性主要是定义了与生命周期有关的钩子：

3.2 逻辑说明

createVNode 函数内部涉及较多的处理逻辑，这里我们只分析主要的逻辑：

介绍完 createVNode 函数之后，阿宝哥再来介绍另一个比较重要的函数 —— normalizeVNode。

四、如何创建规范的 VNode 对象?

normalizeVNode 函数的作用，用于将传入的 child 参数转换为规范的 VNode 对象。

由以上代码可知，normalizeVNode 函数内部会根据 child 参数的类型进行不同的处理：

4.1 null / undefined -> Comment

4.2 boolean -> Comment

4.3 array -> Fragment

4.4 VNode -> VNode

4.5 mounted VNode -> cloned VNode

4.6 primitive types

五、阿宝哥有话说

5.1 如何判断是否为 VNode 对象?

在 VNode 对象中含有一个 __v_isVNode 内部属性，利用该属性可以用来判断当前对象是否为 VNode 对象。

5.2 如何判断两个 VNode 对象的类型是否相同?

在 Vue 3 中，是通过比较 VNode 对象的 type 和 key 属性，来判断两个 VNode 对象的类型是否相同。

5.3 如何快速创建某些类型的 VNode 对象?

在 Vue 3 内部提供了 createTextVNode 、createCommentVNode 和 createStaticVNode 函数来快速的创建文本节点、注释节点和静态节点：

createTextVNode

createCommentVNode

createStaticVNode

本文阿宝哥主要介绍了 VNode 对象是什么、如何创建 VNode 对象及如何创建规范的 VNode 对象。为了让大家能够更深入地理解 h 和 createVNode 函数的相关知识，阿宝哥还从源码的角度分析了 createVNode 函数 。

在后续的文章中，阿宝哥将会介绍 VNode 在 Vue 3 内部是如何被使用的，感兴趣的小伙伴不要错过哟。

六、参考资源

Vue 3 官网 - 渲染函数

相关文章