面试问题：Vue2与Vue3两者Diff流程的区别
建议回答：
Vue2和Vue3在Diff算法上有一些显著的区别，这些区别使得Vue3在性能上有所提升。以下是两者的主要区别：
- 双端比较优化：Vue2使用双端比较策略，从列表的两端开始比较，以尽量减少节点的移动次数。Vue3继续使用双端比较，但在细节上进行了优化，比如对于相同节点的处理更加高效。
- 静态节点提升：Vue3在编译时会对静态节点进行提升，这些节点在更新时不会被重新创建，而是直接复用，大大减少了渲染成本。
- 支持碎片化(Fragment) ：Vue3支持碎片化，允许组件有多个根节点，这在Vue2中是不支持的。
- 区块树(Block Tree) ：Vue3引入了区块树概念，它可以跳过静态内容，快速定位到动态节点，减少了Diff时的比较次数。
- 编译时优化：Vue3在编译时会对模板进行静态提升，将不会变化的节点和属性提取出来，避免在每次渲染时都重新创建。这样可以减少虚拟DOM树的创建和销毁过程，提高性能。
- 最长递增子序列：Vue3引入了最长递增子序列算法来替代Vue2中的双端比较，以减少不必要的节点移动。
技术详解：
Vue2的Diff算法主要通过同级比较和双端比较来工作，它对新旧节点列表进行遍历，比较每个节点是否相同，然后根据需要进行创建、更新或移除操作。Vue2的Diff算法有一些限制，比如不会进行跨层级的节点比较，这可能导致一些不必要的DOM操作。
Vue3的Diff算法则带来了更好的性能和更少的内存消耗，主要得益于双端比较优化、静态节点提升、支持碎片化、区块树引入以及编译时优化。Vue3在处理完首尾节点后，对剩余节点的处理方式也有所不同，它通过建立新节点数组中的剩余节点在旧节点数组上的索引的映射关系数组，然后计算得到最长递增子序列，这个序列中的节点保持不动，然后将新节点数组中的剩余节点移动到正确的位置。
参考链接：
- Vue3官方文档：Vue3官网
- Vue2与Vue3 Diff算法对比：Vue2、Vue3的diff对比
- Vue3 Diff算法详解：一文搞懂 Vue3 的 diff 算法
