为什么 Vue3 的 VNode 不能单独组成一棵完整的树

为什么 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 函数 ，就很好理解了。

1. _createElementBlock(_Fragment, ...)，创建一个 Fragment，（如果 Vue 组件内有多个根元素，会用 Fragment 包裹，以保证一个组件的根元素只有一个）
2. _hoisted_1，静态的 html 内容，会被提升到渲染函数外，这样每次调用渲染函数，就不需要重新创建 VNode（Vue 的编译优化）
3. _createVNode(Comp, ...)，为 Comp 组件创建 VNode。

每次渲染/更新视图，都会调用一遍渲染函数，会生成新的 VNode。

该组件的渲染函数，会生成如下的 VNode：

从这个例子可以看出：

1. 渲染函数会创建一棵 VNode 树，这说明了 VNode 可以连接组合成一棵树，但只是组件内部的一棵树
2. VNode 树描述的是当前组件的状态：Comp 组件的 VNode 的 children 是 test slots 文本。这与 DOM 树是有区别的
3. 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 的修仙秘籍，欢迎大家关注~

拓展阅读

• Vue 文件是如何被转换并渲染到页面的？
• Vite Server 是如何处理页面资源的？
• 手把手教你手写一个 Vite Server（一）
• 手把手教你手写 Vite Server（二）—— 插件架构设计

这篇好文章是转载于：学新通技术网