【前端面试题-13】简单说一下vue2的diff算法

Vue2的Diff算法是用来高效地计算出Virtual DOM（虚拟DOM）变化并应用到实际DOM的一种策略。Vue2采用了基于Snabbdom改进的O(n)复杂度的Diff算法，确保在组件状态改变时能够最小化对真实DOM的操作。以下是Vue2 Diff算法的核心要点：

1. 同层比较：

   • Vue的Diff算法只会对同一层级的节点进行比较，不会跨层级进行操作。

2. 头尾交叉比较：

   • 使用双端比较算法，新旧节点列表从两端开始比较，若两端节点不同，则移动指针向中间靠拢，直至找到相同节点或者遍历结束。

3. Key的重要性：

   • 当元素有key属性时，Vue会根据key来进行更精确的比对。具有相同key的元素被认为是在同一个位置上进行了修改，而非创建或销毁，这样可以有效地复用现有DOM元素。

4. 四种基本操作：

   • 移动（Move）：当发现节点的key不变但位置发生改变时，直接移动DOM元素而不是重新创建。
   • 更新（Update）：当节点类型相同且key存在时，更新节点及其属性和子节点。
   • 插入（Insert）：对于新节点列表中存在的但在旧节点列表中找不到对应key的节点，将其插入DOM中。
   • 删除（Remove）：对于旧节点列表中存在但新节点列表中找不到对应key的节点，从DOM中移除。

5. 静态标记与跳过：

   • 如果节点被标记为静态节点（静态根节点下没有动态数据绑定的子树），则在下次渲染时会跳过Diff这一部分。

6. 属性更新：

   • 不仅比较节点本身，也对节点的属性进行差异化更新，只更新发生变化的属性。

通过这样的算法，Vue可以在状态变更后迅速定位到哪些部分的真实DOM需要更新，从而实现高效的UI更新，减少不必要的DOM操作和重绘重排。