Vue3.0是如何变快的?

最新推荐文章于 2025-05-27 17:12:08 发布

MaxLoongLvs

最新推荐文章于 2025-05-27 17:12:08 发布

阅读量582

点赞数

CC 4.0 BY-SA版权

文章标签： vue vue.js

本文链接：https://blog.youkuaiyun.com/shadowfall/article/details/112385269

本文聚焦Vue3性能优化，介绍了其diff算法，通过添加静态标记，只比较有标记内容，减少性能消耗。还提及hoistStatic静态提升，不参与更新元素仅创建一次并复用；cacheHandlers缓存事件侦听器；ssr渲染大量静态内容时，以字符串存储，速度更快。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是diff算法:传统的Diff算法通过循环递归对节点进行比较，然后判断每个节点的状态以及要做的操作,最后根据vnode进行DOM的渲染。会有两颗DOM树,一个是上次渲染生成的DOM树，一个数数据更新后生成的DOM树，Vue2中会循环遍历全量比较，无论是写死的div还是可变的每一次都会进行比较，所以就会有较大的性能消耗。
在Vue3中，在每次创建虚拟DOM的时候，会根据DOM中的内容会不会发生变化，添加静态标记，标记取值内容的不同代表了需要变化的内容也不同，在数据更新后生成的新的虚拟DOM，并且进行比较的时候只会比较拥有静态标记的内容。

当有大量的静态内容的时候，这些内容会以字符串的形式存储到buffer里面。即使存在动态的绑定，也会通过模板插值嵌入进去，这样会比虚拟dom来渲染快的多
当静态内容大到一定量级的时候，会用_createStaticVNode方法在客户端去生成一个static，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染，也就是说不需要经过虚拟dom的过程。