vue2和vue3diff算法的区别？

前言

vue2和vue3diff算法的区别

diff算法是什么？

diff 算法是一种通过同层的树节点进行比较的高效算法

其有两个特点：

• 比较只会在同层级进行, 不会跨层级比较
• 在diff比较的过程中，循环从两边向中间比较

diff 算法在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较

vue2和vue3的算法的主要的区别？

静态标记

Vue 3 在编译阶段引入了静态标记，即对模板进行分析并标记出那些不会发生变化的部分。这些标记可以帮助 Vue 3 跳过比对静态节点和其子树的过程，从而提高性能。

基于 Proxy 的响应式系统

Vue 3 使用 Proxy 替代了 Vue 2 中的 Object.defineProperty 来实现响应式系统。Proxy 可以捕获对象的访问和修改，使得 Vue 3 在追踪状态变更时更加高效，并且可以监听动态新增的属性。

Patch Flag

Vue 3 在虚拟 DOM 节点中引入了 Patch Flag。Patch Flag 是一个标识，用于指示该节点的属性发生了哪些变化。通过 Patch Flag，Vue 3 可以快速地确定需要对节点进行的操作，从而减少不必要的比对和 DOM 操作。

Block Tree

在 Vue 3 中，模板编译器还引入了 Block Tree 的概念。Block Tree 可以将模板分割为多个块，每个块都有自己的作用域以及动态更新的依赖关系。这种分割可以提高性能，因为只有受影响的块才会触发更新。

片段（Fragment）

Vue 3 引入了片段（Fragment）的概念，即可以同时返回多个根元素。这样可以减少 DOM 中不必要的包装层级，提高渲染性能。

总结

总体而言，Vue 3 在 diff 算法方面进行了一些优化和改进，通过引入静态标记、基于 Proxy 的响应式系统、Patch Flag、Block Tree 等技术，提高了运行时的性能，并且减少了不必要的比对和 DOM 操作。这些改进使得 Vue 3 在性能和开发体验上都有所提升。

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力