尤大在开发者大会上说vue3相较于vue2性能提高了1.2-2倍，经测试实际能达到2-3倍。
vue3的性能优化主要体现在如下几点：

一、diff算法优化

vue2中diff算法是整体全量比对，对整颗vdom树进行循环对比操作
而在vue3中加入了静态标签（PatchFlag）的概念
PatchFlag的意思是给元素上增加一个标记
下图中的1就是一个PatchFlag标签

vue3中对PatchFlag进行了划分，不同元素加上不同的标签类型

• TEXT = 1 // 动态文本节点
• CLASS=1<<1,1 // 2//动态class
• STYLE=1<<2，// 4 //动态style
• PROPS=1<<3,// 8 //动态属性，但不包含类名和样式
• FULLPR0PS=1<<4,// 16 //具有动态key属性，当key改变时，需要进行完整的diff比较。
• HYDRATE_ EVENTS = 1 << 5，// 32 //带有监听事件的节点
• STABLE FRAGMENT = 1 << 6, // 64 //一个不会改变子节点顺序的fragment
• KEYED_ FRAGMENT = 1 << 7, // 128 //带有key属性的fragment 或部分子字节有key
• UNKEYED FRAGMENT = 1<< 8, // 256 //子节点没有key 的fragment
• NEED PATCH = 1 << 9, // 512 //一个节点只会进行非props比较
• DYNAMIC_SLOTS = 1 << 10 // 1024 // 动态slot
• HOISTED = -1 // 静态节点
• BALL = -2

实际上虽然类型众多，但总的来说就分为两类
1、PatchFlag大于1的，当进行diff运算时，大于1的元素会与old vdom进行比对更新
2、PatchFlag小于1的，当进行diff运算时，会忽略这些元素，只有进行整体递归遍历vdom tree时才会进行比对更新

二、静态提升

在vue中，无论元素是否参与更新，在生成vdom树时都会重新创建该元素，而在vue3里有一种静态提升的概念，这个概念的核心思想是对于PatchFlag标记出的，不参与更新的元素提出来，只需创建一次，后续渲染时直接复用就行

三、事件侦听器缓存cacheHandlers

默认在vue的onclick事件上绑定的事件是动态的，因为所绑定的函数有可能会变化，所以每次都需要去追踪是否发生变化，使用cacheHandlers后，会将当前绑定的函数缓存起来，后续更新渲染时直接从缓存中读取该函数，减少了没必要的追踪

不用事件侦听器缓存
patchFlag标记的是8，说明是动态属性

使用事件侦听器缓存后
patchFlag标记消失，说明在更新时无需对该元素进行比对操作