VUE3的新特性（虚拟DOM部分）

相对于vue2
vue3
·更快
·更小
·更易于维护
·更多的原生支持
·更易于开发使用

1。重写虚拟DOM

PatchFlag
动态数据

image.png

左边是我们要编译的实际代码，右边是编译模板生成的渲染函数

可以看到默认渲染函数提供了一个_openBlock和一个_creatBlock，而在_creatBlock中包含的就是创建出的若干节点了。

对比创建一个静态Dom元素和一个动态节点的区别：
第二个_createNode中添加了一个值为1的标记，这个标记就是PatchFlag

PatchFlag 是Vue在运行时生成的，用作节点标记

在Vue3.0中，只有带PatchFlag的这些node会被真正的追踪，也就是说在后续更新的过程中，Vue会知道静态节点不用管，只需要追踪带有PatchFlag的节点

PatchFlag的值为1，注释/* Text */，表示只需关注该节点的文字变化，不用管属性或者其他绑定的变化

动态属性

image.png

我们要编译的代码（左边），为第二个span标签动态绑定一个id，和一个静态的class

此时（右边）PatchFlag变成了 9 /* TEXT, PROPS */, ["id"]

意思很明确，提示我们这个节点中不仅有TEXT的变化，还有PROPS变化，也就是后面数组中的id。而静态添加的class: "bar"并没有被添加到追踪中。

多层级嵌套

image.png

前面我们提到，只有带有PatchFlag标记的节点会被真正的追踪，并且在Vue3中，无论节点的嵌套层级有多深，动态节点都是直接与Block根节点直接绑定的，也就是说当diff算法走到了根节点的时候，就会直接跳到动态变化的节点，无需遍历静态节点。
总的来说：

优化前，在一个默认的Virtual Dom的diff中，需要遍历所有节点，而且每一个节点都要比较旧的props和新的props有没有变化，虽然js做这些事情很快，但是在一个大型应用中，不可避免的会影响性能

而优化之后，diff算法看到一个Block就只需要看里面有没有动态变化的东西，只需要追踪这些就可以了

使用cacheHandlers优化之后

image.png

使用cacheHandlers之后，会自动会生成一个内联函数，在内联函数里面在引用当前组件最新的onClick，再把这个内联函数cache起来

第一次渲染的时候，创建这个内联函数，并将这个内联函数缓存起来，后续的更新就从缓存里面读同一个函数，同一个函数就没有更新的必要了，通过这种事件监听缓存的方式也能对性能提升起到作用。

————————————————
原文链接：https://blog.csdn.net/summer_zhh/article/details/108080930

最后编辑于：2021.06.09 14:27:22