Vue3源码解析之diff（一）

前言

在前面的文章中，我们讨论了单个子节点的更新。然而，在实际的应用程序中，我们经常会遇到需要更新多个子节点的情况。当新旧子节点为多个时，它们更新时就存在节点位置的交换、新增、删除、插入等场景。Vue 中主要通过 patchKeyedChildren 方法来实现这些场景的更新。

patchKeyedChildren 方法

patchKeyedChildren 方法是 Vue3 中用来更新多个子节点的核心方法。它接收三个参数：

• newChildren：新子节点数组
• oldChildren：旧子节点数组
• parentElm：父节点元素

该方法会比较新旧子节点数组，并根据它们的差异进行相应的更新。

比较算法

patchKeyedChildren 方法使用一种称为双指针算法的比较算法。双指针算法使用两个指针来遍历新旧子节点数组，并比较它们之间的差异。如果两个指针指向的子节点相同，则认为它们是相同的子节点，并不会进行更新。否则，认为它们是不同的子节点，并会根据它们的差异进行相应的更新。

更新策略

根据新旧子节点的差异，patchKeyedChildren 方法会采用不同的更新策略。

• 位置交换 ：如果新旧子节点的顺序不同，则会进行位置交换。
• 新增 ：如果新子节点中存在旧子节点中不存在的子节点，则会新增该子节点。
• 删除 ：如果旧子节点中存在新子节点中不存在的子节点，则会删除该子节点。
• 插入 ：如果新子节点中存在旧子节点中不存在的子节点，并且该子节点需要插入到某个特定位置，则会插入该子节点。

实例

为了更好地理解 patchKeyedChildren 方法的运作原理，我们来看一个简单的示例。假设我们有一个父节点元素，其内部有三个子节点：

<div id="parent">
  <div id="child1">子节点1</div>
  <div id="child2">子节点2</div>
  <div id="child3">子节点3</div>
</div>

现在，我们通过 patchKeyedChildren 方法来更新父节点的子节点，使其变成如下所示：

<div id="parent">
  <div id="child2">子节点2</div>
  <div id="child3">子节点3</div>
  <div id="child4">子节点4</div>
</div>

我们可以看到，旧子节点中的 child1 被删除了，旧子节点中的 child2 和 child3 的顺序交换了，并且新子节点中新增了一个 child4。

patchKeyedChildren 方法会首先比较新旧子节点数组，发现 child1 在新子节点数组中不存在，因此将其删除。然后，它会比较 child2 和 child3，发现它们的顺序不同，因此进行位置交换。最后，它会发现新子节点数组中存在 child4，并且该子节点需要插入到 child3 之后，因此将其插入。

总结

patchKeyedChildren 方法是 Vue3 中用来更新多个子节点的核心方法。它使用双指针算法比较新旧子节点数组，并根据它们的差异进行相应的更新。patchKeyedChildren 方法支持位置交换、新增、删除和插入等多种更新策略。通过对 patchKeyedChildren 方法的理解，读者可以更好地理解 Vue3 的 diff 算法的实现。