Vue虚拟DOM无key时启用就地复用策略，按索引逐个复用并更新旧节点，导致状态错乱；key是识别节点身份的唯一依据，必须稳定且唯一，推荐使用数据唯一ID而非index。
当Vue的虚拟DOM进行Diff比对时，若新旧节点列表中的子元素没有设置key，Vue会启用默认的“就地复用”策略——即不移动真实DOM节点位置，仅逐个比对并更新内容。这看似节省性能，却极易引发状态错乱、输入框失焦、动画异常等问题。
就地复用如何工作？
在无key时，Vue将新旧子节点数组按索引一一对应（index 0 ↔ 0，1 ↔ 1…），直接复用旧DOM节点，仅更新其属性、文本或组件实例的数据。它不判断逻辑语义是否一致，只看位置是否相同。
例如：
- 旧列表：
[A, B, C]→ 对应DOM节点<div>A</div>、<div>B</div>、<div>C</div> - 新列表：
[C, A, B]→ Vue仍按索引更新：
→ 第0位：把原A节点内容改成"C"；
→ 第1位：把原B节点内容改成"A"；
→ 第2位：把原C节点内容改成"B"。
结果是DOM结构没变，但每个节点的逻辑身份被错误覆盖，表单控件的value、focus、v-model绑定、过渡状态等全部错位。
立即学习“前端免费学习笔记（深入）”；
为什么Key缺失会放大问题？
key是Vue识别节点身份的唯一依据。没有key，Vue无法区分“同一个元素移动了位置”和“不同元素恰好出现在同一位置”。它只能退化为保守的索引映射，牺牲语义正确性换取最小DOM操作。
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
典型高危场景包括：
- 列表排序（如点击表头切换升序/降序）
- 动态增删中间项（如删除第2条，后续项索引前移）
- 异步加载后局部刷新（新数据顺序与旧渲染顺序不一致）
- 使用
v-if/v-show交替切换同类组件
如何验证是否触发了就地复用？
可通过浏览器开发者工具观察DOM变化：
- 打开Elements面板，选中某列表项，右键 → “Break on” → “attribute modifications”
- 触发列表更新，若看到
input节点的value被修改而非重新挂载，大概率处于就地复用模式 - 更直接的方式：给列表项加
key后再对比——DOM节点是否被移动或重建
也可在组件中打印this.$el引用，更新前后若指向同一DOM对象，说明复用了；若变为新对象，则key生效并触发了重排。
正确使用Key的实践建议
key必须满足两个条件：稳定（same input → same key）且唯一（同级节点间不重复）。推荐做法：
- 优先使用每项数据的唯一ID（如
:key="item.id"），而非:key="index" - 避免用随机数或
Date.now()，会导致每次都重建节点，失去复用意义 - 若数据无天然ID，可借助
crypto.randomUUID()（需兼容性兜底）或在数据初始化时注入唯一标识 - 对静态列表（如导航菜单），即使无ID也可用有意义的字符串（如
:key="item.path"）
记住：Key不是性能优化开关，而是告诉Vue“这个节点代表什么”。写错Key，比不写更危险。
