必须为 v-for 设置唯一稳定的 key，优先使用数据自身的业务 ID（如 user.id），禁用 index、随机数或时间戳；key 需在生命周期内恒定，确保虚拟 DOM 正确复用节点，避免状态错乱与性能损耗。
给 v-for 加上唯一、稳定的 key 值，不是可选项，而是 Vue 渲染正确性和性能的底线。它让 Vue 能精准识别每个节点的身份，避免复用错位、状态错乱和无谓的 DOM 重绘。
key 必须是唯一且稳定的标识
不要用 index 当 key（除非列表只读、永不增删/排序），因为索引会随位置变化而改变，导致 Vue 误判“旧节点已删除、新节点插入”，进而触发错误的组件复用或销毁。真正该用的是每项数据中**自带的、业务层面唯一的 ID 字段**，比如 user.id、todo.uuid。
常见错误写法：
正确写法示例：
{{ user.name }}
避免用随机值或时间戳生成 key
每次渲染都生成新 key（如 :key="Math.random()" 或 :key="Date.now()"），会让 Vue 认为所有节点都是全新的，强制全部重建——组件实例销毁再创建、表单输入清空、动画重播，性能和体验双崩坏。
确保 key 在组件生命周期内保持不变：数据没变，key 就不该变；数据更新后，只要该项仍存在，key 就应沿用原值。
嵌套列表与动态结构更要谨慎设 key
当 v-for 出现在子组件内部、或配合 v-if/v-show 使用时，key 的作用域和稳定性更关键。例如一个可折叠的树形列表，每个节点展开/收起不应影响其子项的 key 绑定。
建议做法：
- 每一层循环都使用该层级数据的唯一 ID，而非拼接父级 ID（除非必要）
- 若需根据条件切换渲染结构（如表格行在编辑态/展示态间切换），把 key 放在最外层容器上，确保状态锚点不丢失
- 对从 API 获取的数组，检查后端是否返回了稳定 ID；没有则在前端用
crypto.randomUUID()或nanoid在首次加载时一次性打标，而非每次响应式更新都重生成
结合 Vue 的响应式原理理解 key 的作用
Vue 的虚拟 DOM Diff 算法默认采用“同层比对 + key 匹配”策略。有 key 时，Vue 会建立一个 key → vnode 的映射表，移动节点时直接复用对应 key 的旧实例；无 key 或 key 冲突，则退化为按顺序逐个比对，极易因插入/删除导致后续所有节点被误更新。
典型症状就是：滚动列表时输入框内容跳变、切换 Tab 后 checkbox 状态错位、拖拽排序后图标闪烁——这些问题八成出在 key 上。
