key必须是稳定唯一的标识，如item.id；用index会导致DOM复用错乱，引发输入内容错位、状态丢失等问题。
因为 index 会随列表结构变化而“漂移”，而 Vue 的 diff 算法依赖 key 做节点身份锚定——一旦 key 失去唯一性与稳定性，复用逻辑就彻底失效，轻则状态错乱，重则 DOM 误删重建。
key 是 Vue 判断“同一个元素”的身份证
Vue diff 不是逐个比对 DOM，而是靠 type + key 组合判定两个 vnode 是否代表同一个真实 DOM 节点。只有两者都一致，才会尝试复用（比如只更新文本、保留 input 光标、维持组件内部状态）；否则就销毁旧节点、新建新节点。
index 只是临时序号，不是数据身份标识。它不随数据走，只随位置走——这和“谁是谁”的语义完全冲突。
实战场景一：插入新项导致输入框内容错位
假设一个 todo 列表，每项带输入框，用户正在编辑第二项：
- 买牛奶
- 【光标在输入框，已输入“交”】交电费
- 取快递
此时在顶部新增一项：
- 写周报 ← 新增
- 买牛奶 ← 原来第0项，现在变成第1项
- 【交电费】← 原来第1项，现在变成第2项
- 取快递 ← 原来第2项，现在变成第3项
Vue 看到：
- 旧 key="0" → 新 key="0"：认为是同一项 → 复用 DOM → 文本从“买牛奶”变成“写周报” ✅
- 旧 key="1" → 新 key="1"：认为是同一项 → 复用 DOM → 文本从“交电费”变成“买牛奶” ❌（用户刚输的“交”没了，还贴到了错误项上）
- 旧 key="2" → 新 key="2"：同理，把“取快递”强行套到原“交电费”的 DOM 上 ❌
- 新 key="3"：无对应旧 key → 新建 DOM → “取快递”最终靠新建渲染 ✅但代价是前三项全部错配
结果：用户输入的“交”消失，“买牛奶”出现在第二个输入框里，“取快递”卡在第三个——视觉和状态全乱。
实战场景二：拖拽排序触发批量重建
初始列表（含状态组件）：
- 张三（已展开详情）
- 李四（已选中复选框）
- 王五（input 中有文字）
用户拖动“王五”到第一位，新顺序为：
- 王五
- 张三
- 李四
Vue diff 过程：
- 旧 key="0" vs 新 key="0"：data-id=101 ≠ 103 → 不是同一节点 → 销毁张三 DOM
- 旧 key="1" vs 新 key="1"：data-id=102 ≠ 101 → 销毁李四 DOM
- 旧 key="2" vs 新 key="2"：data-id=103 = 103 → 复用王五 DOM ✅（但位置被硬拉到开头，动画撕裂）
- 其余两项全量重建 → 张三详情收起、李四复选框清空、王五 input 光标丢失
本质问题：key 没告诉 Vue “王五还是那个王五”，只告诉它“现在排第一的是我”——而 Vue 信了，却忘了“原来排第三的也是我”。
正确做法：用稳定、唯一、不可变的数据字段做 key
✅ 推荐 key 写法：
- key="item.id"（后端返回的主键，如 101/102/103）
- key="item.uuid"（前端生成的唯一 ID）
- key="item.email"（业务上天然唯一且稳定）
❌ 绝对避免：
- key="index"
- key="Math.random()"
- key="item.name"（姓名可能重复）
- key="item.createdAt"（时间戳精度不足或可变）
只要 key 能跨渲染周期稳定指向同一份数据，diff 就能准确复用节点，状态、动画、焦点、滚动位置才能真正延续。
