v-for 必须使用唯一且稳定的 key，优先用 item.id；禁用 index、随机数或时间戳；key 要绑定在 v-for 所在元素或组件上，不可遗漏或错放。
Vue 列表渲染报错，多数情况是因为 v-for 缺少或用错了 key。它不是可选项，而是 Vue 更新虚拟 DOM 的必要依据——没有合法、稳定的 key，Vue 无法准确追踪每个节点的身份，轻则警告，重则渲染错乱、事件绑定失效、输入框失焦、状态丢失。
key 必须是唯一且稳定的字符串
常见错误是用 index 当 key（如 :key="index"），尤其在列表可能增删、排序时：Vue 会复用旧节点，导致组件状态错位。例如，删除第 2 项后，原第 3 项变成第 2 项，但它的 key 还是 2，Vue 认为它是“同一个元素”，直接复用，造成数据与视图不一致。
- ✅ 正确做法：优先使用每项的唯一标识，如
:key="item.id"（id 是后端返回的稳定主键） - ✅ 若无 id，可用组合唯一值，如
:key="item.name + '-' + item.timestamp"（确保拼接结果不重复） - ❌ 避免用
:key="index"，除非列表只读、长度固定、永不排序/增删
v-for 必须配合 key，且 key 不能放在 template 或组件根标签外
v-for 指令必须绑定在有 key 的真实元素或组件上。如果用 <template v-for></template>，key 要写在内部的真实标签上；如果封装成子组件，key 必须加在组件标签本身，而不是组件内部的某个 div 上。
- ✅ 正确：
<useritem v-for="user in users" :key="user.id" :user="user"></useritem> - ✅ 正确（template）：
<template v-for="item in list" :key="item.id"><div>{{ item.name }}</div></template> - ❌ 错误：
<div v-for="item in list"><useritem :key="item.id"></useritem></div>（key 在子组件内，父级 div 没 key）
避免用 Math.random()、Date.now() 等动态值当 key
每次渲染生成新 key（如 :key="Date.now()" 或 :key="Math.random()"），会让 Vue 认为所有节点都是全新的，强制全部销毁重建——性能暴跌，且失去过渡动画、表单状态、焦点等。
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
立即学习“前端免费学习笔记（深入）”；
- ✅ key 应基于数据本身，静态可预测，如 id、slug、唯一字段组合
- ✅ 若数据暂无唯一标识，可在请求后为每项添加临时 id：
users.map((u, i) => ({ ...u, tempId: `temp-${i}-${Date.now()}` }))，但仅限临时场景，上线前应补全真实唯一字段
检查控制台警告，定位具体哪处漏了 key
Vue 会在浏览器控制台明确提示：[Vue warn]: Missing required prop: "key" 或 v-for without key。点击警告右侧文件名，直接跳转到出问题的模板行。重点检查：
- 是否漏写了
:key绑定（写成key="xxx"是静态属性，无效） - 是否 key 值为
undefined或null（如:key="item.id"但 item.id 为空） - 是否在 computed 或 v-if 中嵌套 v-for 导致逻辑分支遗漏 key
key 不是性能“锦上添花”的配置，而是 Vue 列表更新机制的基石。写对 key，错误自然消失，渲染也更高效。
