key设错会直接破坏虚拟dom更新逻辑，导致节点复用失控：输入内容错位、状态丢失、动画失效、性能断崖下跌。根本原因是diff算法失去判断依据，无法正确追踪元素身份。
key 属性设错，不是报个警告就完事——它会直接搅乱 Vue（或 React）的虚拟 DOM 更新逻辑，让界面行为变得“玄学”。核心问题在于：diff 算法失去判断依据，节点复用完全失控。
表单输入内容错位
这是最典型的症状。比如一个任务列表带输入框，用 :key="index"：
- 原始列表是 [A, B, C]，用户在 B 的输入框里打了“开会”
- 此时删除 A，列表变成 [B, C]
- Vue 按索引复用：原索引 1 的节点（B）被当作新列表的索引 0，但 DOM 节点没换，输入框内容“开会”就跑到了第一个位置，而原本属于 A 的状态可能残留在那里
状态丢失或错乱
组件内部状态（如展开/收起、选中、计数器）依赖实例复用。key 不稳定时，实例频繁销毁重建：
- 用随机数或时间戳作 key → 每次渲染都新建组件，所有状态归零
- 用后端返回的非唯一 id（如多个 item.id 都是 0）→ 多个节点 key 冲突，Vue 报 Duplicate keys detected，后续渲染不可预测
- 拖拽排序时用 index → 顺序一变，所有组件都被误判为“新节点”，折叠状态全丢
过渡动画失效或错配
Vue 的
- 用 index 当 key：插入新项时，后续所有项的索引改变，Vue 认为它们是“移动”，实际却是“重绘”，导致动画卡顿或跳帧
- key 重复：Vue 无法区分两个节点，可能只对其中一个触发动画，另一个静默更新
性能断崖式下跌
key 缺失或混乱会让 diff 退化为“暴力重建”：
- 没有 key 或 key 全是相同值 → Vue 放弃智能比对，逐个销毁旧节点、创建新节点
- 用 index 且列表常增删 → 即使只改一项，90% 的节点也被标记为“需更新”，触发大量无意义 DOM 操作
- 大型列表（如千条数据）下，页面明显卡顿，滚动掉帧
