一篇带你搞懂 为什么Vue3比Vue2效率更高！

众所周知，vue3比vue2效率有很大的提升，渲染效率提升了1.3~2倍，SSR效率提升了2~3倍。那么vue3是如何提升效率的呢？

目录

一、静态提升

二、预字符串化

三、缓存事件处理函数

四、Block Tree

五、PatchFlag

一、静态提升

Vue 3中的静态提升（Static Tree Hoisting）是一种编译阶段的优化技术，它能够提高组件的渲染性能。具体来说，静态提升通过以下方式工作：

1、提升静态节点：在Vue 3中，编译器会分析模板并找出不参与数据绑定的静态部分，这些静态节点在编译时被提升为常量，并在渲染函数外部生成。这意味着这些静态节点只会在页面初始化时被创建一次，之后的重新渲染过程中，这些节点会被复用，从而避免了重复创建节点的性能损耗。

2、减少虚拟DOM的创建和比较操作：由于静态节点在首次渲染后就被缓存，Vue 3不需要在每次渲染时都重新创建这些节点，也不需要在diff过程中对比这些静态节点，这减少了虚拟DOM的创建和比较操作，提高了渲染性能。

3、预字符串化：Vue 3还会对静态内容进行预字符串化，将静态内容在编译时转换为字符串，以减少运行时的计算和处理。

4、扁平静态树：Vue 3会将连续的静态VNode进行合并，生成扁平的VNode树，减少树的深度，这样可以进一步减少渲染