Vue中key的作用：为什么不建议用数组索引作为key

在使用 Vue 进行列表渲染时，key 属性对于渲染性能和状态保持至关重要。直接使用数组索引（如 :key="index"）虽然能避免报错，但在涉及列表动态变更（如排序、插入、删除）的场景下，会导致严重的显示错误或性能问题。

1. 理解核心机制：虚拟 DOM 的对比逻辑

Vue 在更新页面时，会生成一个新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行对比。这个对比过程称为“Diff 算法”。key 是虚拟 DOM 节点的唯一标识，帮助 Vue 识别哪些节点是相同的、哪些是改变的、哪些是新增或删除的。

打开 浏览器控制台，观察 Vue 的更新行为：

1. 当 key 存在且唯一时，Vue 判断 具有相同 key 的两个节点是同一个元素。
2. Vue 会复用 该节点对应的真实 DOM 元素，仅更新 发生变化的属性。
3. 如果 key 发生改变或不存在，Vue 会销毁 旧的 DOM 元素并创建 新的 DOM 元素。

2. 问题演示：使用索引作为 Key 的陷阱

假设我们有一个待办事项列表，每一行都有一个复选框和文本。

创建 如下的测试数据结构：

data() {
  return {
    list: [
      { id: 1, name: '任务 A', isChecked: false },
      { id: 2, name: '任务 B', isChecked: true },
      { id: 3, name: '任务 C', isChecked: false }
    ]
  }
}

编写 使用索引作为 key 的模板代码：

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <input type="checkbox" v-model="item.isChecked">
      <span>{{ item.name }}</span>
    </div>
    <button @click="removeFirst">删除第一项</button>
  </div>
</template>

<script>
export default {
  methods: {
    removeFirst() {
      this.list.shift(); // 删除数组第一项
    }
  }
}
</script>

执行 以下操作步骤，观察 异常现象：

1. 勾选 第二个复选框（对应“任务 B”）。
2. 点击 “删除第一项”按钮，移除“任务 A”。
3. 查看 页面结果：原本“任务 B”的勾选状态，竟然保持在了现在的第一行（即原来的“任务 C”）上。

3. 深度分析：状态错位的原因

上述问题的根源在于 Vue 的“就地复用”策略。当使用索引作为 key 时，Vue 并不关心数据的实际内容，只关心数据在数组中的位置。

为了直观展示这一过程，我们通过流程图来解析删除操作发生时的 Diff 对比逻辑：

解析 图中的逻辑流：

1. 对比 新旧列表的第一个元素：

   • 旧列表 Key 0 是“任务 A”。
   • 新列表 Key 0 变成了“任务 B”。
   • Vue 发现 Key 都是 0，于是认为 这是同一个元素。
   • Vue 执行 操作：复用“任务 A”的 DOM 节点，但将其内容更新为“任务 B”。
   • 结果：由于是复用，该节点原本的输入框状态（如光标位置、选中状态）被错误地保留了下来。

2. 对比 新旧列表的第二个元素：

   • 旧列表 Key 1 是“任务 B”。
   • 新列表 Key 1 变成了“任务 C”。
   • Vue 执行 操作：复用“任务 B”的 DOM 节点给“任务 C”。

这种错位会导致用户界面显示混乱，特别是在包含表单输入（如 input、checkbox）或动画过渡的场景中。

4. 正确做法：使用唯一 ID 作为 Key

要解决这个问题，必须使用数据中唯一且稳定的标识（如 id）作为 key。这样，无论数据在数组中如何移动，id 始终与具体的数据项绑定。

修改 模板代码，将 :key="index" 替换 为 :key="item.id"：

<template>
  <div>
    <!-- 注意这里的变化 -->
    <div v-for="item in list" :key="item.id">
      <input type="checkbox" v-model="item.isChecked">
      <span>{{ item.name }}</span>
    </div>
    <button @click="removeFirst">删除第一项</button>
  </div>
</template>

再次执行 操作步骤，验证 修复效果：

1. 勾选 “任务 B”的复选框。
2. 点击 “删除第一项”，移除“任务 A”。
3. 确认 页面结果：
   • “任务 B”移动到了第一行，且勾选状态正确跟随。
   • “任务 C”保持在第二行，且状态为未勾选。

原理：此时 Vue 的对比逻辑变成了基于身份的匹配。

Vue 能够识别 出 ID 2 依然存在，只是位置变了，因此它会移动 对应的 DOM 节点，而不是销毁重建，也不会将其错误地复用给其他数据。

5. 特殊场景：何时可以使用索引

虽然通常不建议使用索引，但在以下特定条件同时满足时，可以使用索引作为 key：

1. 列表是纯静态展示的。
2. 列表不会发生插入、删除或排序操作。
3. 列表数据不包含任何需要状态的交互组件（如输入框、复选框）。

如果仅仅是渲染一个固定的导航菜单或静态文本列表，使用索引是安全的。

6. 总结对比

为了方便记忆和查阅，下表总结了不同 key 策略的区别：