为什么要在列表组件中写 key

key 是给每一个 vnode（虚拟节点）的唯一 id, 可以依靠 key, 更准确, 更快的拿到 oldVnode 中对应的 vnode 节点。

补充

补充：key 是 Vue / React 在做 diff（vnode 对比）时用来识别节点的稳定标识。给列表项设置稳定且唯一的 key（通常是数据 id），diff 算法能：

1. 精准识别"同一逻辑节点"在更新前后是否移动、增删；
2. 复用对应的 DOM 节点，避免不必要的销毁/重建；
3. 保留组件实例状态（如输入框的 focus、滚动位置、动画等）；
4. 避免出现把"原本节点 A 的内容"错误地渲染到"节点 B"位置上的 bug。

反例：把 key 当作 index 使用（即 key={index}），当列表顺序变化时 React/Vue 会把不同 id 的项错认为"同一节点"，从而导致状态错位、动画错乱、性能变差。

// 推荐
{todos.map(t => <TodoItem key={t.id} {...t} />)}
// 不推荐（顺序变化会引发 bug）
{todos.map((t, i) => <TodoItem key={i} {...t} />)}

来源整理自：vue3js.cn 面试官系列