key是节点的唯一身份凭证，无key时diff按索引硬匹配导致误判更新；有key则通过唯一标识精准复用节点、保留状态、避免重建，且必须源自数据本身而非index。
Diff 算法依赖 key，是因为它需要一种可靠方式判断“新旧节点是否代表同一个实体”。没有 key，框架只能按顺序硬匹配——位置一变，就认不出原来的节点，结果就是该复用的没复用，该移动的被重建。
key 是节点的唯一身份凭证
Vue 和 React 的 Diff 不是逐像素比对，而是基于“同层比较”策略。在子节点列表中，key 就像身份证号：只要新旧节点 key 相同，就认定是同一节点，哪怕它从第 3 位挪到了第 1 位。算法据此决定复用 DOM 实例、保留 input 光标、维持组件内部状态，而不是销毁再新建。
没 key 或 key 用错的典型后果
- 状态丢失：比如列表里每个 item 包含一个输入框，排序后所有输入框清空、光标消失——因为节点被当成全新元素重建了
- 性能浪费：在数组开头插入一项，后续所有节点都被 patch（属性重设、事件重绑），而非仅移动 DOM 节点
-
动画失效：
无法追踪元素对应关系，入场/离场动画全部错乱或不触发 - 组件意外重载：动态 tab 切换时，若用 index 当 key，即使内容相同，也会反复销毁重建组件，导致 data、watch、computed 全部重置
为什么 index 不适合作为 key
index 是位置标记，不是身份标识。一旦增删、过滤、排序，index 就批量漂移。例如原始数据 [A, B, C] 对应 key=[0,1,2]；删除 A 后变成 [B, C]，key 变成 [0,1]——但 B 的 key 从 1 变成了 0，Vue 认为它是新节点，于是重建 B 的整个 DOM 实例和组件实例。
真正有效的 key 长什么样
- 来自数据本身：item.id、item.uuid、item.phone（确保业务上唯一且稳定）
- 生命周期内不变：不能随渲染次数变化（如 Date.now()、Math.random()）
- 同级唯一：在同一 v-for 列表中绝不重复，否则 Vue 会降级为顺序比对并报 warning
- 适用范围不止于 v-for：动态组件
、具名插槽切换、表单类型切换都依赖 key 强制重置或精准复用
