剖析 Vue3 源码之 diff 乱序比对

前端

2024-01-18 23:52:56

前言

在前一篇文章中，我们分析了 diff 算法的前四步逻辑。第五步乱序比对逻辑 Vue 又分了三步来进行，那什么是乱序比对呢？我们知道节点的比较存在新增、删除、位置交换、内容更替等场景。

乱序比对是 diff 算法中一个至关重要的步骤，它允许算法在节点发生位置改变的情况下正确地识别和更新节点。在 Vue3 中，乱序比对被分为三个阶段：

创建 KeyMap：首先，Vue3 会为新旧两个虚拟DOM树中的节点创建 keyMap。keyMap 是一个以节点的 key 为键，以节点本身为值的数据结构。通过 keyMap，Vue3 可以快速找到节点在旧虚拟DOM树中的位置。
标记待移动节点：接下来，Vue3 会标记那些需要移动的节点。这些节点通常是那些在旧虚拟DOM树中的位置与在新虚拟DOM树中的位置不同的节点。
执行节点移动：最后，Vue3 会执行节点移动操作，将需要移动的节点移动到正确的位置。

乱序比对算法的引入大大提高了 diff 算法的效率，使其能够在更短的时间内完成虚拟DOM树的比较和更新。

乱序比对的具体实现

为了更好地理解乱序比对的具体实现，我们来看一个具体的例子。假设我们有一个虚拟DOM树如下：

<div id="app">
  <p>Hello World</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

如果我们对这个虚拟DOM树进行更新，将第三个 <li> 节点移动到第一个 <li> 节点的前面，那么更新后的虚拟DOM树如下：

<div id="app">
  <p>Hello World</p>
  <ul>
    <li>Item 3</li>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

为了比较这两个虚拟DOM树，Vue3 会首先创建 keyMap。keyMap 的结构如下：

{
  "app": <div id="app">...</div>,
  "hello-world": <p>Hello World</p>,
  "ul": <ul>...</ul>,
  "item-1": <li>Item 1</li>,
  "item-2": <li>Item 2</li>,
  "item-3": <li>Item 3</li>
}