为什么在 Vue 中使用 index 作为 key 是一个糟糕的主意

在 Vue 中避免使用 index 作为 key 的原因

当在 Vue 中使用 v-for 指令渲染列表时，指定一个唯一的 key 属性至关重要。虽然使用 index 作为 key 似乎是一个便捷的选择，但它实际上会导致潜在的问题，尤其是当列表项重新排序或更新时。

问题 1：列表重新排序

当使用 index 作为 key 时，如果列表项被重新排序，Vue 就会根据新 index 来更新这些项。然而，如果列表中包含具有相同内容的项，Vue 可能无法正确识别它们。这是因为 index 无法保证在重新排序后保持唯一性。

例如，假设我们有一个包含三个相同项目的列表：

<ul>
  <li>{{ item.name }}</li>
  <li>{{ item.name }}</li>
  <li>{{ item.name }}</li>
</ul>

如果我们使用 index 作为 key：

<ul>
  <li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
</ul>

当列表项重新排序时，Vue 可能会将相同内容的项视为不同的项，从而导致意外行为，例如重复或丢失的项。

问题 2：列表更新

当列表项被更新时，Vue 使用 key 来确定哪个项已被更改。如果使用 index 作为 key，则在更新操作期间，index 可能发生变化。这会混淆 Vue，因为它可能无法正确识别已更新的项。

例如，假设我们有一个包含两个项目的列表：

<ul>
  <li>{{ item.name }}</li>
  <li>{{ item.name }}</li>
</ul>

如果我们使用 index 作为 key：

<ul>
  <li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
</ul>

当第一个项目被更新时，index 将从 0 变为 1。这会导致 Vue 将第一个项目视为一个新项，从而创建重复项。

推荐的解决方案

为了避免这些问题，建议始终在 Vue 中为列表项指定一个唯一且稳定的 key。这通常是数据模型中每个项的唯一标识符，例如 ID 或 UUID。通过使用唯一 key，Vue 能够准确地跟踪列表项，即使它们被重新排序或更新。

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

通过遵循这些建议，您可以在 Vue 中创建健壮且可维护的列表，即使在列表项重新排序或更新时也能正常工作。