VNode 的 Key 值冲突会导致列表元素错位、状态丢失等异常，因 Vue 依赖 key 唯一标识节点以正确复用 DOM；常见原因包括用 index、非唯一字段、动态不稳 key 或空 id 作 key。

Diff 算法本身**不处理 key 冲突**——它假设 key 是唯一且稳定的。一旦出现重复 key，算法会因无法准确映射而退化为“误判复用”，引发状态错乱、DOM 异常或渲染错误。这不是策略问题，而是使用前提被破坏的结果。

为什么 key 冲突会导致严重问题

key 的核心作用是建立新旧节点的**一对一映射关系**。当两个节点拥有相同 key 时：

• 哈希映射表（如 {key: oldIndex}）只能保留最后一个节点的索引，前一个被覆盖
• 双端比对过程中，算法可能将新节点错误匹配到已被“覆盖”的旧节点上
• 结果是：本该新建的节点被复用旧状态（比如 input 的 value、焦点、组件内部 this.state），或本该复用的节点被意外销毁

框架实际如何应对冲突（非主动处理，而是降级行为）

主流框架（React/Vue）不会抛错或警告，而是按以下方式“静默降级”：

• React：在 reconcileChildrenArray 阶段，遇到重复 key 时，后续同 key 节点会被视为“新增”，跳过复用逻辑，直接 mount；但首个同 key 节点仍可能被错误复用，导致中间状态污染
• Vue 3：在 patchKeyedChildren 中，构建 key 映射时后出现的节点覆盖先出现的；遍历时若查到 key，就复用对应旧节点——意味着只有最后一个同 key 元素有机会被正确识别，其余都被忽略或当作新节点插入
• 共同表现：列表渲染出现“内容错位”“输入框值跳变”“useEffect 多次执行”等典型症状，但控制台通常无报错

真正有效的“应对策略”是预防，而非运行时修复

关键在于开发阶段杜绝冲突来源：

• 永远不用数组 index 作为 key，尤其在涉及排序、过滤、动态增删的场景
• 确保 key 来自数据源的**稳定唯一标识**：如 item.id、item.uuid、item.email（需业务上绝对不重复）
• 服务端返回数据时，避免前端拼接生成 key（如 index + timestamp），防止并发或重绘导致重复
• 对来自不同数据源的混合列表（如搜索结果+推荐项），用前缀区分 key 命名空间，例如 `search-${id}` 和 `rec-${id}`

调试与验证方法

发现疑似 key 问题时，可快速验证：

• 打开 React DevTools 或 Vue DevTools，观察列表节点的 key 值是否真实唯一（右键检查元素 → 查看 props 或 __vccOpts）
• 临时将 key 改为 JSON.stringify(item)（仅调试），确认问题是否消失（注意性能影响）
• 在控制台打印渲染前的 key 数组：console.log(list.map(x => x.key))，肉眼检查重复项