为什么 Vue3 的 VNode 不能单独组成一棵完整的树？
以前一直以为，VNode 也能像 DOM 那样，根据 children 属性，将 VNode 连接组成一棵树。但最近我发现这是不对的，VNode 不能单独组成一棵完整的页面树。
Demo
我们用一个例子来说明一下，Vue Playground 在线预览链接
App.vue:
<script setup> import Comp from './Comp.vue' </script> <template> <h1>Hello World!</h1> <Comp> test-slot </Comp> </template> Comp.vue
<template> <h2> slot： <slot></slot> </h2> </template>
对应的比较完整的树结构如下（图差不多看看就行，文章后面会有解析）：
红框中的内容，是实际渲染到页面的内容。
那为什么不是单独将 VNode 连接组合成树，就像下图一样：
要搞清楚这个问题，我们先来看看 VNode 是怎么创建的。
VNode 的创建
下图是一个 vue 单文件组件的编译结果：
我们知道，Vue 的 template 模板最终都会编译成渲染函数，如右图，稍微一看，好像一个函数都不认识，但其实将 createELementVNode 换成我们熟知的 h 函数 ，就很好理解了。
_createElementBlock(_Fragment, ...)，创建一个 Fragment，（如果 Vue 组件内有多个根元素，会用 Fragment 包裹，以保证一个组件的根元素只有一个）_hoisted_1，静态的 html 内容，会被提升到渲染函数外，这样每次调用渲染函数，就不需要重新创建 VNode（Vue 的编译优化）_createVNode(Comp, ...)，为Comp组件创建 VNode。
每次渲染/更新视图，都会调用一遍渲染函数，会生成新的 VNode。
该组件的渲染函数，会生成如下的 VNode：
从这个例子可以看出：
- 渲染函数会创建一棵 VNode 树，这说明了 VNode 可以连接组合成一棵树，但只是组件内部的一棵树
- VNode 树描述的是当前组件的状态：
Comp组件的 VNode 的 children 是test slots文本。这与 DOM 树是有区别的 - children 属性可能会用于描述特殊的嵌套关系，如：slot
渲染函数是在编译时，从 Vue template 编译出来的，其 VNode 树的嵌套结构，已经在编译时就确定下来，跟运行时无关。
运行时，无非是确定一些 VNode 的值，例如某个变量的绑定、某个 slots 的值
Vue 组件内部实例
当两个组件的渲染函数都被执行完成之后，会有两个 VNode Tree：
那么这两个 VNode Tree，是怎么关联起来的，怎么才能组合成一棵完整的树?
ComponentInternalInstance 组件实例起到了关联 VNode Tree 的作用，我们可以通过使用 getCurrentInstance 获取到组件的内部实例（getCurrentInstance 只暴露给高阶使用场景，典型的比如在库中）
它们的关系如下：
- 组件 VNode，能够通过 component 属性，访问到
ComponentInternalInstance实例 ComponentInternalInstance实例，能够通过 subtree 属性，访问到组件的最顶层内容的 VNode
因此，我们会得到一开始的完整的树：
总结
本文用一个简单的例子，说明了 VNode 的创建过程，是每次组件渲染/更新时，调用渲染函数创建的 VNode，VNode 树只描述当前组件的状态，其嵌套关系在编译时就已经确认。
VNode 无法组成一个完整的树，是因为 VNode 树之前不能直接进行连接，children 属性不能直接用于连接 VNode 树，因为存在一些特殊的嵌套关系（如：slot、suspense）
一个组件会得到一棵 VNode 树，而 VNode 树，需要用组件内部实例进行连接。通过组件 VNode 获取组件内部实例，然后再通过 subtree 连接该组件的 VNode 树。
如果没有引入组件的概念，那 VNode 树就是一棵完整的树。
最后
如果这篇文章对您有所帮助，请帮忙点个赞👍，您的鼓励是我创作路上的最大的动力。
最近注册了一个公众号，刚刚起步，名字叫：Candy 的修仙秘籍，欢迎大家关注~
