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

目录

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

        背景 上一篇文章,分析了 Vue.js 3.2 关于响应式部分的优化,此外,在这次优化升级中,还有一个运行时的优化:
        ~200% faster creation of plain element VNodes
        即针对普通元素类型 vnode 的创建,提升了约 200% 的性能。这也是一个非常伟大的优化,是 Vue 的官方核心开发者 HcySunYang 实现的,可以参考这个 PR。
        那么具体是怎么做的呢,在分析实现前,我想先带你了解一些 vnode 的背景知识。

        什么是 vnode vnode 本质上是用来描述 DOM 的 JavaScript 对象,它在 Vue.js 中可以描述不同类型的节点,比如普通元素节点、组件节点等。

        普通元素 vnode
        什么是普通元素节点呢?举个例子,在 HTML 中我们使用
        我们可以用 vnode 这样表示