key的稳定性直接决定vue能否正确复用节点——不稳定的key（如index、math.random()、date.now()）会导致vue误判为新节点而反复销毁重建；只有稳定且唯一的key（如user.id、post.uuid或合理组合键），才能准确保留输入框内容、滚动位置及组件内部状态。
key 值的稳定性直接决定 Vue 能否正确复用节点——不稳定的 key 会让 Vue 认为“这是个新东西”，从而反复销毁重建；而稳定、唯一的 key，才能让输入框内容、滚动位置、组件内部状态原样保留。
为什么稳定性比“看起来唯一”更重要
一个看似唯一的 key（比如 :key="Math.random()" 或 :key="Date.now()"）每次渲染都变，Vue 就无法匹配旧节点，所有组件都会被强制重新初始化。哪怕列表数据没变，也会触发完整重建，表单清空、动画中断、性能下降。
- index 不稳定：插入/删除/排序后，同一数据项的 index 会变，导致 Vue 把“张三”当成“李四”来更新
- ID 类字段稳定：后端返回的
user.id、post.uuid、todo._id在整个生命周期内不变，是理想选择 - 组合键可兜底：当原始数据无 ID（如纯文本数组），可用
:key="'text-' + item + '-' + index"，但需确保组合结果在当前上下文中唯一
复用性依赖 key 的两个前提
Vue 只有在 key 同时满足“唯一”和“稳定”时，才会复用对应 DOM 节点或组件实例。缺一不可。
- 同一父级下重复 key（如多个 item 共享相同 id）：Vue 降级为顺序比对，等同于没写 key
- key 类型错误（对象、数组）：控制台警告 “Avoid using non-primitive value as key”，且实际不生效
- key 写在错误位置（如写在 v-for 外层容器上）：Vue 无法关联到具体列表项，复用逻辑失效
哪些场景最考验 key 的稳定性
日常开发中，以下操作会暴露不稳定 key 的问题：
- 搜索过滤后列表长度变化 → index 错位，输入框内容跳转到其他项
- 拖拽排序 → 无 key 或 index key 导致所有组件重置，拖拽状态丢失
- 动态增删（尤其在开头 unshift）→ 旧项全部被 patch，而非仅新增节点
- 配合
<transition-group></transition-group>动画 → key 不稳定则动画锚点失效，出现闪动或无动画
组件列表中的 key 不只是“加个属性”
当 v-for 渲染的是自定义组件时，key 还影响实例生命周期：
- key 相同 → Vue 复用组件实例，data、watch、mounted 等状态延续
- key 改变 → 触发组件销毁再创建，相当于一次完整的 mount/unmount
- 典型应用：表单类型切换（手机号/邮箱登录）时，用
:key="loginType"强制重置内部 v-model 和校验状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
