Vue2 手写 diff 算法之第五种情况及 Vue3 对比

目录

Vue2 手写 diff 算法之第五种情况及 Vue3 对比

一、Vue2 中第五种情况的处理

二、Vue3 中的 diff 算法变化

三、代码示例（Vue3）

---

在 Vue2 的 diff 算法中，第五种情况是当新旧节点经过前四种情况的判断都不匹配时触发的。让我们先来回顾一下 Vue2 中第五种情况的处理逻辑。

一、Vue2 中第五种情况的处理

1. 首先，当以上四种情况都未匹配时，会创建一个对象kMap，用于存放虚拟节点。通过循环遍历旧节点数组，从起始位置（通常为 0）到结束位置，将每一个旧节点存储到kMap中。

   let kMap = {};
   for (let i = oldStart; i <= oldEnd; i++) {
     const k = old[i];
     if (k) {
       kMap[k] = i;
     }
   }

1. 接着，在旧节点中查找新前指向的节点。如果能找到，说明该节点在新旧虚拟节点中都存在，只需要移动它的位置即可；如果找不到，则说明是一个新的节点，需要通过create方法创建新节点并插入到合适的位置。

   let inOld = {};
   for (let newStartK in newStartWindows) {
     if (inOld.hasOwnProperty(newStartK)) {
       // 节点存在，移动位置并 patch
       const oldIndex = inOld[newStartK];
       const oldVNode = old[oldIndex];
       patch(oldVNode, newStartK);
       // 处理过的节点在旧虚拟节点的数组中设置为 undefined
       old[oldIndex] = undefined;
       // 移动节点位置
       parentElm.insertBefore(oldVNode.elm, startWindows.elm);
     } else {
       // 节点不存在，创建新节点并插入
       const newVNode = create(newStartK);
       parentElm.insertBefore(newVNode, startWindows.elm);
     }
   }

1. 最后，还需要进行一些额外的判断，如判断旧节点的起始位置是否为undefined，如果是则旧数据指针加加，并更新对应的节点数据。

   if (oldStartVNode === undefined) {
     oldStart++;
     oldStartVNode = old[oldStart];
   }

二、Vue3 中的 diff 算法变化

在 Vue3 中，diff 算法进行了一些优化和改进。Vue3 的 diff 算法更加高效，主要体现在以下几个方面：

1. 静态提升：Vue3 将不会变化的静态节点提升到外部，避免在每次渲染时进行不必要的 diff 操作。
2. 基于最长递增子序列的算法优化：在处理列表更新时，Vue3 采用了基于最长递增子序列的算法，减少了移动操作的次数。
3. PatchFlag 标记：通过在虚拟 DOM 上添加PatchFlag标记，Vue3 可以更精确地判断节点的变化类型，从而进行更高效的更新操作。

三、代码示例（Vue3）

以下是一个简单的 Vue3 组件示例，展示了如何使用 Vue3 的 diff 算法进行渲染：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const list = ref([1, 2, 3, 4, 5]);
    return { list };
  },
};
</script>

在这个示例中，当list数组发生变化时，Vue3 的 diff 算法会自动进行高效的更新操作，只更新发生变化的部分，而不是重新渲染整个列表。

总的来说，Vue2 和 Vue3 的 diff 算法在处理方式上有所不同，Vue3 的算法更加高效和优化。了解这些差异可以帮助我们更好地理解 Vue 的渲染机制，并在开发中选择合适的版本。

希望这篇文章对你理解 Vue2 的 diff 算法第五种情况以及 Vue3 的 diff 算法有所帮助！