vue中key的原理

在 Vue.js 中，key 是一个特殊属性，主要用于虚拟 DOM 的 diff 算法，以优化 DOM 更新性能并确保组件状态的正确性。

场景	无 key	有 key (唯一id)
列表末尾插入	性能尚可	性能更优
列表中间插入/删除	可能导致后续所有节点更新	仅操作目标节点
列表顺序变化	大量 DOM 移动或重建	高效复用或移动
组件状态保持	容易错乱	状态保持正确

总结

关键点	说明
身份标识	key 让 Vue 能准确识别每个节点的“身份”，避免误判。
优化 diff	加速新旧 VNode 树的比对，减少 DOM 操作。
状态维护	保证组件内部状态（如 input 值、checked 状态）与数据正确对应。
最佳实践	使用唯一且稳定的 id，不要使用 index（除非列表静态且无增删排序）。