您现在的位置是：网站首页> 编程资料编程资料

Vue.js3.2的vnode部分优化升级使用示例详解_vue.js_

2023-05-24 315人已围观

简介 Vue.js3.2的vnode部分优化升级使用示例详解_vue.js_

我们可以用 vnode 这样表示 标签：

const vnode = { type: 'button', props: { 'class': 'btn', style: { width: '100px', height: '50px' } }, children: 'click me' } 

其中，type 属性表示 DOM 的标签类型；props 属性表示 DOM 的一些附加信息，比如 style 、class 等；children 属性表示 DOM 的子节点，在该示例中它是一个简单的文本字符串，当然，children 也可以是一个 vnode 数组。

组件 vnode

vnode 除了可以像上面那样用于描述一个真实的 DOM，也可以用来描述组件。举个例子，我们在模板中引入一个组件标签 ：

我们可以用 vnode 这样表示 组件标签：

const CustomComponent = { // 在这里定义组件对象 } const vnode = { type: CustomComponent, props: { msg: 'test' } } 

组件 vnode 其实是对抽象事物的描述，这是因为我们并不会在页面上真正渲染一个 标签，而最终会渲染组件内部定义的 HTML 标签。

除了上述两种 vnode 类型外，还有纯文本 vnode、注释 vnode 等等。

另外，Vue.js 3.x 内部还针对 vnode 的 type，做了更详尽的分类，包括 Suspense、Teleport 等，并且把 vnode 的类型信息做了编码，以便在后面 vnode 的挂载阶段，可以根据不同的类型执行相应的处理逻辑：

// runtime-core/src/vnode.ts const shapeFlag = isString(type) ? 1 /* ELEMENT */ : isSuspense(type) ? 128 /* SUSPENSE */ : isTeleport(type) ? 64 /* TELEPORT */ : isObject(type) ? 4 /* STATEFUL_COMPONENT */ : isFunction(type) ? 2 /* FUNCTIONAL_COMPONENT */ : 0; 

vnode 的优势

知道什么是 vnode 后，你可能会好奇，那么 vnode 有什么优势呢？为什么一定要设计 vnode 这样的数据结构呢？

首先是抽象，引入 vnode，可以把渲染过程抽象化，从而使得组件的抽象能力也得到提升。

其次是跨平台，因为 patch vnode 的过程不同平台可以有自己的实现，基于 vnode 再做服务端渲染、weex 平台、小程序平台的渲染都变得容易了很多。

不过这里要特别注意，在浏览器端使用 vnode 并不意味着不用操作 DOM 了，很多人会误以为 vnode 的性能一定比手动操作原生 DOM 好，这个其实是不一定的。

因为这种基于 vnode 实现的 MVVM 框架，在每次组件渲染生成 vnode 的过程中，会有一定的 JavaScript 耗时，尤其是是大组件。举个例子，一个 1000 * 10 的 Table 组件，组件渲染生成 vnode 的过程会遍历 1000 * 10 次去创建内部 cell vnode，整个耗时就会变得比较长，再加上挂载 vnode 生成 DOM 的过程也会有一定的耗时，当我们去更新组件的时候，用户会感觉到明显的卡顿。

虽然 diff 算法在减少 DOM 操作方面足够优秀，但最终还是免不了操作 DOM，所以说性能并不是 vnode 的优势。

如何创建 vnode

通常我们开发组件都是编写组件的模板，并不会手写 vnode，那么 vnode 是如何创建的呢？

我们知道，组件模板经过编译，会生成对应的 render 函数，在 render 函数内部，会执行 createVNode 函数创建 vnode 对象，我们来看一下 Vue.js 3.2 之前它的实现：

function createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, isBlockNode = false) { if (!type || type === NULL_DYNAMIC_COMPONENT) { if ((process.env.NODE_ENV !== 'production') && !type) { warn(`Invalid vnode type when creating vnode: ${type}.`) } type = Comment } if (isVNode(type)) { const cloned = cloneVNode(type, props, true /* mergeRef: true */) if (children) { normalizeChildren(cloned, children) } return cloned } // 类组件的标准化 if (isClassComponent(type)) { type = type.__vccOpts } // class 和 style 标准化. if (props) { if (isProxy(props) || InternalObjectKey in props) { props = extend({}, props) } let { class: klass, style } = props if (klass && !isString(klass)) { props.class = normalizeClass(klass) } if (isObject(style)) { if (isProxy(style) && !isArray(style)) { style = extend({}, style) } props.style = normalizeStyle(style) } } // 根据 vnode 的类型编码 const shapeFlag = isString(type) ? 1 /* ELEMENT */ : isSuspense(type) ? 128 /* SUSPENSE */ : isTeleport(type) ? 64 /* TELEPORT */ : isObject(type) ? 4 /* STATEFUL_COMPONENT */ : isFunction(type) ? 2 /* FUNCTIONAL_COMPONENT */ : 0 if ((process.env.NODE_ENV !== 'production') && shapeFlag & 4 /* STATEFUL_COMPONENT */ && isProxy(type)) { type = toRaw(type) warn(`Vue received a Component which was made a reactive object. This can ` + `lead to unnecessary performance overhead, and should be avoided by ` + `marking the component with `markRaw` or using `shallowRef` ` + `instead of `ref`.`, `\nComponent that was made reactive: `, type) } const vnode = { __v_isVNode: true, __v_skip: true, type, props, key: props && normalizeKey(props), ref: props && normalizeRef(props), scopeId: currentScopeId, slotScopeIds: null, children: null, component: null, suspense: null, ssContent: null, ssFallback: null, dirs: null, transition: null, el: null, anchor: null, target: null, targetAnchor: null, staticCount: 0, shapeFlag, patchFlag, dynamicProps, dynamicChildren: null, appContext: null } if ((process.env.NODE_ENV !== 'production') && vnode.key !== vnode.key) { warn(`VNode created with invalid key (NaN). VNode type:`, vnode.type) } normalizeChildren(vnode, children) // 标准化 suspense 子节点 if (shapeFlag & 128 /* SUSPENSE */) { type.normalize(vnode) } if (isBlockTreeEnabled > 0 && !isBlockNode && currentBlock && (patchFlag > 0 || shapeFlag & 6 /* COMPONENT */) && patchFlag !== 32 /* HYDRATE_EVENTS */) { currentBlock.push(vnode) } return vnode } 

可以看到，创建 vnode 的过程做了很多事情，其中有很多判断的逻辑，比如判断 type 是否为空：

if (!type || type === NULL_DYNAMIC_COMPONENT) { if ((process.env.NODE_ENV !== 'production') && !type) { warn(`Invalid vnode type when creating vnode: ${type}.`) } type = Comment } 

判断 type 是不是一个 vnode 节点：

if (isVNode(type)) { const cloned = cloneVNode(type, props, true /* mergeRef: true */) if (children) { normalizeChildren(cloned, children) } return cloned } 

判断 type 是不是一个 class 类型的组件：

if (isClassComponent(type)) { type = type.__vccOpts } 

除此之外，还会对属性中的 style 和 class 执行标准化，其中也会有一些判断逻辑：

if (props) { if (isProxy(props) || InternalObjectKey in props) { props = extend({}, props) } let { class: klass, style } = props if (klass && !isString(klass)) { props.class = normalizeClass(klass) } if (isObject(style)) { if (isProxy(style) && !isArray(style)) { style = extend({}, style) } props.style = normalizeStyle(style) } } 

接下来还会根据 vnode 的类型编码：

const shapeFlag = isString(type) ? 1 /* ELEMENT */ : isSuspense(type) ? 128 /* SUSPENSE */ : isTeleport(type) ? 64 /* TELEPORT */ : isObject(type) ? 4 /* STATEFUL_COMPONENT */ : isFunction(type) ? 2 /* FUNCTIONAL_COMPONENT */ : 0 

然后就是创建 vnode 对象，创建完后还会执行 normalizeChildren 去标准化子节点，这个过程也会有一系列的判断逻辑。

创建 vnode 过程的优化

仔细想想，vnode 本质上就是一个 JavaScript 对象，之所以在创建过程中做很多判断，是因为要处理各种各样的情况。然而对于普通元素 vnode 而言，完全不需要这么多的判断逻辑，因此对于普通元素 vnode，使用 createVNode 函数创建就是一种浪费。

顺着这个思路，就可以在模板编译阶段，针对普通元素节点，使用新的函数来创建 vnode，Vue.js 3.2 就是这么做的，举个例子：

借助于模板导出工具，可以看到它编译后的 render 函数：

import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue" const _hoisted_1 = { class: "home" } const _hoisted_2 = /*#__PURE__*/_createElementVNode("img", { alt: "Vue logo", src: "../assets/logo.png" }, null, -1 /* HOISTED */) export function render(_ctx, _cache, $props, $setup, $data, $options) { const _component_HelloWorld = _resolveComponent("HelloWorld") return (_openBlock(), _createElementBlock("template", null, [ _createElementVNode("div", _hoisted_1, [ _hoist
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：HTML+CSS+JavaScript实现可拖拽模态框_javascript技巧_
                                                                
下一篇：使用typescript+webpack构建一个js库的示例详解_javascript技巧_