[Vue] diff流程 - vue3

面试问题：Vue3中的diff流程

建议回答：

Vue3中的diff算法是虚拟DOM（Virtual DOM）算法的核心部分，它负责比较新旧虚拟DOM树，并计算出最少的DOM操作来更新实际的DOM树。Vue3的diff算法主要包含以下几个步骤：

1. 准备工作：在Vue3中，diff算法开始之前，会根据DOM中的内容是否会发生变化，添加一个静态标记。这个标记有助于在后续的diff过程中，只对比这些带有静态标记的节点。
2. 不带key的新虚拟DOM树：从前往后遍历新旧虚拟DOM树，将旧虚拟DOM更新为新虚拟DOM。比较新旧虚拟DOM树的长度，处理新增与删除的节点。
3. 带key的新虚拟DOM树：Vue3使用最长递增子序列（LCS）算法来优化对比流程，可以最大程度地减少DOM的移动，达到最少的DOM操作。
4. 前置与后置的预处理：Vue3会先处理相同的前置与后置元素，这些元素不需要修改也不需要移动，只需要进行打补丁patch就可以了。
5. 最长递增子序列：在处理完前置与后置元素后，Vue3会找到需要移动的节点，并将其移动到正确的位置。这是通过计算新旧节点的最长递增子序列来实现的。

技术详解：

Vue3的diff算法主要优化点包括：

1. 静态标记 + 非全量Diff：Vue3在创建虚拟DOM树的时候，会根据DOM中的内容会不会发生变化，添加一个静态标记。之后在与上次虚拟节点进行对比的时候，就只会对比这些带有静态标记的节点。
2. 最长递增子序列优化：Vue3使用最长递增子序列算法来优化对比流程，可以最大程度地减少DOM的移动，达到最少的DOM操作。

参考链接：

• Vue3官方文档：Vue3官网
• Vue3 diff算法详解：一文搞懂 Vue3 的 diff 算法
• Vue3 Diff算法总结：Vue3 Diff算法总结