相对于vue2
vue3
·更快
·更小
·更易于维护
·更多的原生支持
·更易于开发使用
1。重写虚拟DOM
PatchFlag
动态数据
左边是我们要编译的实际代码，右边是编译模板生成的渲染函数
可以看到默认渲染函数提供了一个_openBlock和一个_creatBlock，而在_creatBlock中包含的就是创建出的若干节点了。
对比创建一个静态Dom元素和一个动态节点的区别：
第二个_createNode中添加了一个值为1的标记，这个标记就是PatchFlag
PatchFlag 是Vue在运行时生成的，用作节点标记
在Vue3.0中，只有带PatchFlag的这些node会被真正的追踪，也就是说在后续更新的过程中，Vue会知道静态节点不用管，只需要追踪带有PatchFlag的节点
PatchFlag的值为1，注释/* Text */，表示只需关注该节点的文字变化，不用管属性或者其他绑定的变化
动态属性
我们要编译的代码（左边），为第二个span标签动态绑定一个id，和一个静态的class
此时（右边）PatchFlag变成了 9 /* TEXT, PROPS */, ["id"]
意思很明确，提示我们这个节点中不仅有TEXT的变化，还有PROPS变化，也就是后面数组中的id。而静态添加的class: "bar"并没有被添加到追踪中。
多层级嵌套
前面我们提到，只有带有PatchFlag标记的节点会被真正的追踪，并且在Vue3中，无论节点的嵌套层级有多深，动态节点都是直接与Block根节点直接绑定的，也就是说当diff算法走到了根节点的时候，就会直接跳到动态变化的节点，无需遍历静态节点。
总的来说：
优化前，在一个默认的Virtual Dom的diff中，需要遍历所有节点，而且每一个节点都要比较旧的props和新的props有没有变化，虽然js做这些事情很快，但是在一个大型应用中，不可避免的会影响性能
而优化之后，diff算法看到一个Block就只需要看里面有没有动态变化的东西，只需要追踪这些就可以了
-
事件监听缓存：cacheHandlers
在没有优化的情况下，不使用cacheHandlers
image.png
可以看到，优化前，由于我们不知道onClick是否会在之后发生改变，必须对它进行动态绑定，那么运行时就会需要一次
使用cacheHandlers优化之后
使用cacheHandlers之后，会自动会生成一个内联函数，在内联函数里面在引用当前组件最新的onClick，再把这个内联函数cache起来
第一次渲染的时候，创建这个内联函数，并将这个内联函数缓存起来，后续的更新就从缓存里面读同一个函数，同一个函数就没有更新的必要了，通过这种事件监听缓存的方式也能对性能提升起到作用。
————————————————
原文链接：https://blog.csdn.net/summer_zhh/article/details/108080930
