基于 Vue3 ，打造前台+中台通用提效解决方案

Download: https://www.itwangzi.cn/2624....

【基于 Vue3 ，打造前台+中台通用提效解决方案_完结】以前一直以为，VNode 也能像 DOM 那样，根据 children 属性，将 VNode 连接组成一棵树。但最近我发现这是不对的，VNode 不能单独组成一棵完整的页面树。Demo我们用一个例子来说明一下，Vue Playground 在线预览链接[1]App.vueComp.vue对应的比较完整的树结构如下（图差不多看看就行，文章后面会有解析）：

文章图片

红框中的内容，是实际渲染到页面的内容。

文章图片

那为什么不是单独将 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[2] 获取到组件的内部实例（getCurrentInstance 只暴露给高阶使用场景，典型的比如在库中）它们的关系如下：

? 组件 VNode，能够通过 component 属性，访问到 ComponentInternalInstance 实例? ComponentInternalInstance 实例，能够通过 subtree 属性，访问到组件的最顶层内容的 VNode因此，我们会得到一开始的完整的树：

文章图片

总结本文用一个简单的例子，说明了 VNode 的创建过程，是每次组件渲染/更新时，调用渲染函数创建的 VNode，VNode 树只描述当前组件的状态，其嵌套关系在编译时就已经确认。VNode 无法组成一个完整的树，是因为 VNode 树之前不能直接进行连接，children 属性不能直接用于连接 VNode 树，因为存在一些特殊的嵌套关系（如：slot、suspense）一个组件会得到一棵 VNode 树，而 VNode 树，需要用组件内部实例进行连接。通过组件 VNode 获取组件内部实例，然后再通过 subtree 连接该组件的 VNode 树。如果没有引入组件的概念，那 VNode 树就是一棵完整的树。