Vue 100 问（第 5 问）：为何 v-for 的 key 值不能是 index？

巧用 “key” 值，让 Vue 渲染更流畅

Vue 中 v-for 指令是渲染列表数据的利器，但其使用也有讲究，特别是 key 值的选择。本文将深入解析为何 v-for 的 key 值不能是 index，并探讨最佳实践。

虚拟 DOM 和 diffing

理解 key 值的重要性，首先要从 Vue 的渲染机制入手。Vue 采用虚拟 DOM 技术，将组件模板编译为一个轻量级的虚拟 DOM 对象。当状态变化时，Vue 会重新计算新的虚拟 DOM，并与之前的虚拟 DOM 进行 diffing，仅更新变化的部分，从而优化渲染性能。

index 作为 key 的弊端

在 v-for 循环中，使用 index 作为 key 值似乎很方便，因为它可以按顺序标识列表项。然而，这种方式存在致命缺陷：当列表项发生新增、删除或重新排序时，index 会随之变化，导致 Vue 无法正确 diffing，从而触发不必要的重新渲染。

举个例子，假设我们有一个水果列表：

[
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Orange' },
  { id: 3, name: 'Banana' }
]

使用 index 作为 key 值：

<ul>
  <li v-for="fruit in fruits" :key="fruit.id">{{ fruit.name }}</li>
</ul>

如果我们删除第二个列表项，得到新的列表：

[
  { id: 1, name: 'Apple' },
  { id: 3, name: 'Banana' }
]

由于 index 发生了变化，Vue 会将所有列表项都重新渲染，尽管实际上只有第二个列表项被删除。这不仅影响性能，还可能导致闪烁等视觉问题。

唯一不变的 key 值

为了避免上述问题，Vue 需要一个在列表项整个生命周期内保持不变的 key 值。它可以是唯一的 ID、元素名称或任何可以唯一标识列表项的属性。

<ul>
  <li v-for="fruit in fruits" :key="fruit.id">{{ fruit.name }}</li>
</ul>

使用 ID 作为 key 值，当删除第二个列表项时，Vue 只需更新剩余的列表项，渲染效率大大提升。

最佳实践

在 v-for 循环中选择 key 值时，遵循以下最佳实践：

• 始终使用一个唯一的、不变的属性作为 key 值。
• 优先使用 ID，如果没有，可以使用名称、序号等属性。
• 如果列表项没有合适的唯一属性，可以考虑使用 UUID 等外部标识符。

总结

理解 v-for key 值的重要性至关重要，它直接影响 Vue 渲染的性能和正确性。避免使用 index 作为 key 值，转而使用唯一的、不变的属性，可以有效优化 diffing 过程，让 Vue 渲染更流畅。