Vue 3源码深度解析之：`Vue`的`Key`属性：它在`Diff`算法中如何影响元素复用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众，晚上好！今天咱们聊聊 Vue 3 源码里一个经常被忽略，但又至关重要的家伙——key 属性。别看它貌不惊人，但在 Vue 的 Diff 算法中，它可是个能影响元素复用的大佬！

开场白：DOM 节点的那点事儿

咱们先来想象一个场景：你是一个勤劳的清洁工，负责打扫一个房间。房间里堆满了各种各样的东西，你需要把它们整理一下。如果东西的位置稍微变动了，你是选择把所有东西都扔掉，重新买一批新的放进去，还是尽量把能用的东西挪个位置继续用呢？

显然，作为理智的人，我们会选择后者。毕竟，能省则省嘛！DOM 节点也是一样的道理。在 Vue 中，频繁的 DOM 操作会带来性能损耗。所以，Vue 的 Diff 算法的目标就是：尽可能地复用已有的 DOM 节点，减少不必要的创建和销毁。

key 的作用：给 DOM 节点贴个身份证

如果没有 key，Diff 算法就只能按照顺序一个一个地比较新旧节点。如果节点的位置发生改变，Diff 算法很可能会误判，认为这是一个新的节点，从而触发重新创建和销毁的操作。这就好比你把房间里的东西挪了个位置，清洁工却认不出来了，直接扔掉买了新的！

而 key 的作用就是给每一个 DOM 节点贴上一个唯一的“身份证”。有了这个身份证，Diff 算法就能准确地识别出哪些节点是相同的，即使它们的位置发生了改变。这样，就可以避免不必要的 DOM 操作，提升性能。

Diff 算法的“侦探”逻辑

Vue 的 Diff 算法本质上是一个“侦探”，它需要根据新旧虚拟 DOM 树，找出需要更新、移动、添加或删除的节点。key 就相当于侦探手中的线索，帮助他快速锁定目标。

Diff 算法的流程大致如下：

同级比较： Diff 算法只会比较同一层级的节点。
key 的作用： 首先，Diff 算法会尝试根据 key 找到新旧节点中相同的节点。
更新或复用： 如果找到了相同的节点，会根据新节点的信息更新旧节点（如果需要）。如果没有找到，则会判断是新增还是删除节点。

代码实战：key 的威力

咱们通过几个例子来感受一下 key 的威力。

例子 1：没有 key 的列表

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
    <button @click="addItem">Add Item</button>
  </div>
</template>

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

export default {
  setup() {
    const items = ref([
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
    ]);

    const addItem = () => {
      items.value.unshift({ id: Date.now(), text: 'New Item' });
    };

    return {
      items,
      addItem,
    };
  },
};
</script>

在这个例子中，我们创建了一个简单的列表，并且给每个 li 元素都绑定了一个唯一的 key，也就是 item.id。当我们点击 "Add Item" 按钮时，会在列表的开头添加一个新的元素。

现在，我们把 :key="item.id" 这一行代码去掉，看看会发生什么。

<template>
  <div>
    <ul>
      <li v-for="item in items">{{ item.text }}</li>
    </ul>
    <button @click="addItem">Add Item</button>
  </div>
</template>

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

export default {
  setup() {
    const items = ref([
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
    ]);

    const addItem = () => {
      items.value.unshift({ id: Date.now(), text: 'New Item' });
    };

    return {
      items,
      addItem,
    };
  },
};
</script>

在没有 key 的情况下，当添加新的元素时，Vue 会认为第一个元素（Item 1）发生了改变，需要更新它的内容。虽然界面看起来没有问题，但是实际上 Vue 做了不必要的 DOM 操作。

例子 2：列表排序

假设我们有一个列表，用户可以对列表进行排序。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
    <button @click="sortItems">Sort Items</button>
  </div>
</template>

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

export default {
  setup() {
    const items = ref([
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
      { id: 3, text: 'Item 3' },
    ]);

    const sortItems = () => {
      items.value.sort(() => Math.random() - 0.5);
    };

    return {
      items,
      sortItems,
    };
  },
};
</script>

在这个例子中，我们给每个 li 元素都绑定了 item.id 作为 key。当我们点击 "Sort Items" 按钮时，列表的顺序会随机改变。由于每个元素都有唯一的 key，Vue 能够正确地识别出哪些元素发生了移动，并只对这些元素进行移动操作，而不是重新创建所有元素。

如果去掉 :key="item.id"，那么每次排序后，Vue 都会重新创建所有的 li 元素，性能会受到影响。

key 的选择：稳定性和唯一性

选择合适的 key 非常重要。key 必须是稳定的和唯一的。

稳定性： key 应该在节点的整个生命周期内保持不变。如果 key 频繁变化，Diff 算法就无法正确地识别节点，从而导致不必要的 DOM 操作。
唯一性： key 必须是唯一的。如果多个节点使用了相同的 key，Diff 算法会出错，导致渲染结果不正确。

一般来说，我们可以使用以下几种方式来生成 key：

数据库 ID： 如果数据来自数据库，可以使用数据库 ID 作为 key。
UUID： 可以使用 UUID（通用唯一识别码）来生成唯一的 key。
数据项的某个唯一属性： 例如，如果数据项有一个唯一的 email 属性，可以使用 email 作为 key。
索引（慎用）： 除非列表的顺序是永远不会改变的，否则不建议使用索引作为 key。因为当列表的顺序发生改变时，索引也会发生改变，从而导致 Diff 算法出错。

以下表格总结了不同 key 选择方案的优缺点：

Key 的选择	优点	缺点	适用场景
数据库 ID	稳定、唯一	需要数据有 ID	数据来自数据库，且数据有唯一的 ID
UUID	稳定、唯一	占用空间较大	数据没有唯一的 ID，需要手动生成唯一的 `key`
唯一属性	稳定、唯一	需要数据有唯一的属性	数据有唯一的属性，例如 `email`、`username` 等
索引 (index)	简单易用	当列表顺序改变时，会导致不必要的 DOM 操作。如果列表节点包含状态（例如 input 框），可能会导致状态错乱	列表顺序不会改变，例如静态的列表
随机数	看起来唯一, 但实际上每次渲染都不同	每次渲染都会生成新的随机数，导致 Diff 算法认为所有的节点都发生了改变，严重影响性能。绝对不要使用随机数作为 key。	任何场景都不适用。

key 的注意事项：

不要使用随机数作为 key： 每次渲染都会生成新的随机数，导致 Diff 算法认为所有的节点都发生了改变，严重影响性能。
key 必须是字符串或数字： Vue 要求 key 必须是字符串或数字类型。
在 v-for 中必须使用 key： Vue 会在控制台发出警告，如果没有提供 key，会影响性能。

深入源码：Diff 算法中的 key

虽然我们不能把 Vue 3 的源码全部啃下来，但我们可以大致了解一下 key 在 Diff 算法中是如何发挥作用的。

在 Vue 的 Diff 算法中，有一个关键的函数叫做 patchKeyedChildren。这个函数负责比较带有 key 的子节点。

patchKeyedChildren 的大致流程如下：

创建索引表： 首先，会创建一个索引表，用于存储旧子节点的 key 和对应的索引。
遍历新子节点： 然后，会遍历新的子节点，尝试在索引表中找到对应的旧子节点。
更新、移动或新增：
- 如果找到了对应的旧子节点，会判断是否需要更新。如果需要更新，则会调用 patch 函数更新节点。
- 如果旧节点的位置发生了改变，则会移动旧节点到新的位置。
- 如果没有找到对应的旧子节点，则会创建一个新的节点。
处理剩余的旧节点： 最后，会处理剩余的旧节点，如果这些节点在新子节点中不存在，则会删除这些节点。

通过这个流程，Diff 算法能够高效地比较带有 key 的子节点，最大限度地复用已有的 DOM 节点。

key 的最佳实践：

始终为 v-for 提供 key： 这是最基本的原则。
选择稳定且唯一的 key： 避免使用索引作为 key，除非列表的顺序永远不会改变。
避免在运行时生成 key： 尽量在数据初始化时就生成 key，避免在运行时频繁生成新的 key。
理解 key 的作用： 深入理解 key 在 Diff 算法中的作用，才能更好地利用 key 来优化性能。

总结：key 的重要性

key 属性是 Vue 中一个非常重要的概念，它能够帮助 Diff 算法更高效地复用 DOM 节点，从而提升性能。虽然 key 看起来很简单，但是选择合适的 key 需要一定的经验和技巧。希望通过今天的讲解，大家能够对 key 有更深入的理解，并在实际开发中灵活运用 key 来优化 Vue 应用的性能。

好了，今天的讲座就到这里。感谢大家的观看！如果有什么问题，欢迎大家提问。

现场问答环节 (模拟):

观众A: 老师，如果我的列表数据没有唯一的ID，用UUID作为key会影响性能吗？生成UUID的开销大不大？

专家: 这是一个好问题！UUID 的确会增加一些开销，主要是因为生成 UUID 需要一定的计算量，并且 UUID 字符串相对较长，占用更多的内存。但是，相比于没有 key 或者 key 不稳定导致的大量 DOM 操作，UUID 的开销通常是可以接受的。如果你的列表数据真的没有唯一的 ID，并且列表的更新频率不是特别高，那么使用 UUID 作为 key 是一个可以接受的方案。当然，如果你能找到其他的唯一属性，或者通过某种方式生成唯一的 ID，那就更好了。

观众B: 如果我动态的给一个组件绑定key，每次都不同，会导致什么问题？

专家: 这绝对是应该避免的！动态绑定每次都不同的 key，相当于每次都告诉 Vue，这是一个全新的组件。 Vue 会销毁之前的组件实例，然后重新创建一个新的组件实例。这会导致组件的状态丢失，并且会触发不必要的 DOM 操作，严重影响性能。想象一下，如果你正在一个表单里输入内容，每次 key 变化，表单都会重置，那体验简直糟糕透了！所以，一定要保证 key 的稳定性。

观众C: key值是字符串还是数字性能更好？

专家: 从 Vue 内部的实现来看，字符串和数字类型的 key 并没有明显的性能差异。 Vue 内部会对 key 进行类型转换，最终都转换为字符串进行比较。所以，关键在于 key 的唯一性和稳定性，而不是 key 的类型。选择哪种类型取决于你的数据结构和业务场景。如果你的数据本身就是数字 ID，那就直接使用数字 ID 作为 key；如果你的数据是字符串类型的唯一标识，那就直接使用字符串作为 key。重要的是保证 key 的唯一性和稳定性，而不是刻意地为了优化性能而改变 key 的类型。

发表回复 取消回复

发表回复取消回复