面试题：在 Vue 的 v-for 循环中，key 有什么作用？

在 Vue 的 v-for 指令中，key 是一个非常重要的特殊属性，它的主要作用是为每个循环项提供一个唯一的“身份标识”（identity），帮助 Vue 的虚拟 DOM (Virtual DOM) 算法高效地追踪和复用元素，从而提升渲染性能并避免潜在的 UI 状态错误。

核心作用详解

1. 提高渲染性能（Diff 算法优化）

Vue 在更新 DOM 时，会使用一种称为“差异比较”（Diff）的算法来找出新旧虚拟 DOM 树之间的差异，并以最小的代价更新真实 DOM。

没有 key 时：
- Vue 默认采用“就地更新”（in-place patch）策略。
- 它会按索引顺序比较新旧节点列表。
- 例如，当列表顺序改变或在开头插入新项时，Vue 会认为索引 0 的项“内容变了”，于是销毁旧元素并创建一个新元素，即使元素类型和大部分内容相同。这会导致不必要的 DOM 重新创建和渲染，性能低下。
有 key 时：
- Vue 会根据 key 的值来匹配新旧节点列表中的元素。
- 它会尝试复用具有相同 key 的现有元素，只更新其变化的部分。
- 对于新增的 key，创建新元素；对于不存在的 key，销毁旧元素。
- 这样可以最小化 DOM 操作，例如通过移动（move）而不是销毁再创建来更新列表，大大提升了性能。

2. 保持组件或元素的状态

key 不仅影响 DOM 元素，还影响组件实例。

场景：假设 v-for 循环的是一个带有内部状态的组件（如输入框、选中的复选框等）。
没有 key：当列表顺序改变时，由于 Vue 按索引更新，原本在索引 1 的输入框内容可能会被错误地“移动”到索引 0，导致状态错乱。
有 key：Vue 会根据 key 来识别每个组件的“身份”。即使顺序改变，只要 key 相同，组件实例就会被正确地复用或移动，其内部状态得以保持。

如何正确使用 `key`

唯一性：key 必须在同级兄弟节点中唯一。
稳定性：key 应该是一个稳定的值，不随渲染过程而改变。
推荐使用：
- 数据的唯一 ID：最佳选择。例如 :key="item.id"。
- 唯一标识符：如数据库主键、UUID 等。
避免使用：
- 数组索引 (index)：虽然简单，但不推荐。因为当列表发生插入、删除或排序时，索引会变化，导致 key 失去唯一性和稳定性，无法有效优化 Diff 算法，甚至可能引发状态混乱。

示例说明

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
      <input v-model="user.status" placeholder="状态">
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'Alice', status: 'active' },
        { id: 2, name: 'Bob', status: 'inactive' }
      ]
    }
  }
}
</script>

假设我们将 users 数组顺序反转。
有 key="user.id"：Vue 会识别到 id: 1 和 id: 2 的用户仍然存在，只是顺序变了。它会移动这两个 <li> 元素，并保持各自输入框中的 status 状态不变。
没有 key 或 key="index"：Vue 会认为索引 0 的用户从 Alice 变成了 Bob，于是更新 DOM 内容，并且输入框的状态也会从 Alice 的状态变为 Bob 的状态，导致状态错乱。

总结

key 在 v-for 中的作用是：

性能优化：帮助 Vue 的 Diff 算法高效地复用和移动 DOM 元素，避免不必要的销毁和重建。
状态保持：确保组件或元素的内部状态（如表单输入）在列表更新时不会丢失或错乱。

最佳实践：始终为 v-for 循环提供一个基于数据唯一 ID 的 key，避免使用数组索引作为 key。

THE END

Vue 基础面试题