Vue.js 3.2中vnode优化升级示例如何详细解析？

本文共计3373个文字，预计阅读时间需要14分钟。

目录+背景+什么是vnode+普通元素+vnode+组件+vnode的优势+如何创建vnode+创建vnode的过程优化+总结+背景+上一篇文章分析了Vue.js 3.2关于响应式部分的优化，此次优化升级+

目录

• 背景
• 什么是 vnode
• 普通元素 vnode
• 组件 vnode
• vnode 的优势
• 如何创建 vnode
• 创建 vnode 过程的优化
• 总结

背景

上一篇文章，分析了 Vue.js 3.2 关于响应式部分的优化，此外，在这次优化升级中，还有一个运行时的优化：

~200% faster creation of plain element VNodes

即针对普通元素类型 vnode 的创建，提升了约 200% 的性能。这也是一个非常伟大的优化，是 Vue 的官方核心开发者 HcySunYang 实现的，可以参考这个 PR。

那么具体是怎么做的呢，在分析实现前，我想先带你了解一些 vnode 的背景知识。