#列表渲染 Key 的作用

#1. 核心作用

• 身份标识：Key 是虚拟 DOM 节点的唯一 ID。
• 辅助 Diff：告诉 Vue 哪些节点只是换了位置、哪些是新增的、哪些是删除的。

#2. 为什么不能用 Index？

如果用索引 (index) 作为 key，当列表顺序发生变化（如删除第一项）时：

1. 所有后续节点的 key 都会发生变化 (0->deleted, 1->0, 2->1...)。
2. Vue 会认为这些节点全是新的，或者错误地复用了旧节点的 DOM 状态。
3. 后果：性能下降（不仅没复用，还重新渲染了），严重时会导致输入框内容错乱、动画失效。

#3. 最佳实践

• 必须唯一：在同一级兄弟节点中必须唯一。
• 必须稳定：不要使用 Math.random() 或 Date.now() 做 key，否则每次更新列表都会全部销毁重建。
• 推荐：使用后端返回的唯一 ID (如 item.id, item.uuid)。