简述vue2.x 和 vue3.x 渲染器的 diff 算法 ？

Vue2.x 和 Vue3.x 渲染器的 diff 算法在核心思路上有一定的相似之处，但在实现细节和性能优化上有所不同。以下是对两者 diff 算法的简述：

Vue2.x 的 diff 算法

1. 基本思路：

   • Vue2.x 的 diff 算法主要基于“双端比较”的策略，从新旧节点的两端开始进行比较，然后逐渐向中间靠拢。
   • 算法在同层比较节点，不会跨层比较，时间复杂度为 O(N)。

2. 实现过程：

   • 创建新旧虚拟 DOM 的首尾指针。
   • 通过四种比较方式（头-头，头-尾，尾-头，尾-尾）来查找可复用的节点。
   • 如果在比较过程中发现指向的节点内容一致，则直接复用旧节点作为 diff 创建的节点。
   • 如果四种比较方式都不满足，则创建新节点并插入到 diff 队列后面，并将新虚拟 DOM 的指针指向下一个节点。
   • 当其中一条虚拟 DOM 的 endStart < startIndex 时，比较结束。
   • 根据新老节点的数量差异，执行插入或删除操作。

3. 优化：

   • Vue2.x 通过使用 key 属性来标记节点，帮助算法更准确地复用和排序节点。

Vue3.x 的 diff 算法

1. 基本思路：

   • Vue3.x 的 diff 算法在 Vue2.x 的基础上进行了优化，引入了“最长递增子序列”（LIS）的概念。
   • 算法依然只会在同一层级进行比较，但处理方式更为高效。

2. 实现过程：

   • Vue3.x 的 diff 算法首先会建立一个新节点的剩余节点在旧节点中的位置数组。
   • 通过这个数组，算法可以找到一个最长递增子序列（LIS）。
   • 这个 LIS 对应的节点在 diff 过程中保持不变，只需要移动剩余节点即可。

3. 优化：

   • Vue3.x 的 diff 算法通过减少不必要的节点创建和删除操作，进一步提高了渲染性能。
   • 此外，Vue3.x 还引入了更多的性能优化措施，如静态提升（static lifting）、事件监听器缓存等。

总结

Vue2.x 和 Vue3.x 的 diff 算法在核心思路上都是基于同层比较和节点复用的策略，但 Vue3.x 在实现细节和性能优化上做了更多的工作，使得其渲染性能更加出色。在实际使用中，Vue3.x 的性能提升对于大型应用或需要频繁更新 DOM 的场景尤为明显。