基于 Vue3 ,打造前台+中台通用提效解决方案_完结

发布时间:2022-09-19 16:30

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

以前一直以为,VNode 也能像 DOM 那样,根据 children 属性,将 VNode 连接组成一棵树。但最近我发现这是不对的,VNode 不能单独组成一棵完整的页面树。Demo我们用一个例子来说明一下,Vue Playground 在线预览链接[1]App.vueimport Comp from './Comp.vue'Comp.vue对应的比较完整的树结构如下(图差不多看看就行,文章后面会有解析):
基于 Vue3 ,打造前台+中台通用提效解决方案_完结_第1张图片
红框中的内容,是实际渲染到页面的内容。
基于 Vue3 ,打造前台+中台通用提效解决方案_完结_第2张图片
那为什么不是单独将 VNode 连接组合成树,就像下图一样:
基于 Vue3 ,打造前台+中台通用提效解决方案_完结_第3张图片
要搞清楚这个问题,我们先来看看 VNode 是怎么创建的。VNode 的创建下图是一个 vue 单文件组件的编译结果:
基于 Vue3 ,打造前台+中台通用提效解决方案_完结_第4张图片
我们知道,Vue 的 template 模板最终都会编译成渲染函数,如右图,稍微一看,好像一个函数都不认识,但其实将 createELementVNode 换成我们熟知的 h 函数 ,就很好理解了。1. _createElementBlock(_Fragment, ...),创建一个 Fragment,(如果 Vue 组件内有多个根元素,会用 Fragment 包裹,以保证一个组件的根元素只有一个)2. _hoisted_1,静态的 html 内容,会被提升到渲染函数外,这样每次调用渲染函数,就不需要重新创建 VNode(Vue 的编译优化)3. _createVNode(Comp, ...),为 Comp 组件创建 VNode。每次渲染/更新视图,都会调用一遍渲染函数,会生成新的 VNode。该组件的渲染函数,会生成如下的 VNode:
基于 Vue3 ,打造前台+中台通用提效解决方案_完结_第5张图片
从这个例子可以看出:1. 渲染函数会创建一棵 VNode 树,这说明了 VNode 可以连接组合成一棵树,但只是组件内部的一棵树2. VNode 树描述的是当前组件的状态:Comp 组件的 VNode 的 children 是 test slots 文本。这与 DOM 树是有区别的3. children 属性可能会用于描述特殊的嵌套关系,如:slot渲染函数是在编译时,从 Vue template 编译出来的,其 VNode 树的嵌套结构,已经在编译时就确定下来,跟运行时无关。运行时,无非是确定一些 VNode 的值,例如某个变量的绑定、某个 slots 的值Vue 组件内部实例当两个组件的渲染函数都被执行完成之后,会有两个 VNode Tree:
基于 Vue3 ,打造前台+中台通用提效解决方案_完结_第6张图片
那么这两个 VNode Tree,是怎么关联起来的,怎么才能组合成一棵完整的树?ComponentInternalInstance 组件实例起到了关联 VNode Tree 的作用,我们可以通过使用 getCurrentInstance[2] 获取到组件的内部实例(getCurrentInstance 只暴露给高阶使用场景,典型的比如在库中)它们的关系如下:

• 组件 VNode,能够通过 component 属性,访问到 ComponentInternalInstance 实例• ComponentInternalInstance 实例,能够通过 subtree 属性,访问到组件的最顶层内容的 VNode因此,我们会得到一开始的完整的树:
基于 Vue3 ,打造前台+中台通用提效解决方案_完结_第7张图片
总结本文用一个简单的例子,说明了 VNode 的创建过程,是每次组件渲染/更新时,调用渲染函数创建的 VNode,VNode 树只描述当前组件的状态,其嵌套关系在编译时就已经确认。VNode 无法组成一个完整的树,是因为 VNode 树之前不能直接进行连接,children 属性不能直接用于连接 VNode 树,因为存在一些特殊的嵌套关系(如:slot、suspense)一个组件会得到一棵 VNode 树,而 VNode 树,需要用组件内部实例进行连接。通过组件 VNode 获取组件内部实例,然后再通过 subtree 连接该组件的 VNode 树。如果没有引入组件的概念,那 VNode 树就是一棵完整的树。

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号