key 是 v-for 渲染列表时的必需项，必须为字符串或数字、同一父级下唯一，优先用稳定 ID（如 item.id），禁用 index；遍历对象时 key 用属性名，数字遍历时可用 n；避免 v-if 与 v-for 同标签、key 必须写在组件标签上。

v-for 渲染列表时，key 不是可选项，而是必须项。它直接决定 Vue 能否正确追踪元素、避免错乱、保障性能。漏掉 key 或用错 key，轻则列表顺序错乱、状态丢失，重则组件反复重建、过渡失效、控制台持续报错。

key 是 Vue 更新 DOM 的“身份证”

Vue 用虚拟 DOM 做差异比对（diff）。没有 key 时，Vue 只能按顺序位置（索引）识别元素——比如把原数组第 2 项当作“永远在位置 1 的那个节点”。一旦插入、删除或排序，位置就变，Vue 就会错误复用、错位更新，导致输入框内容跑偏、选中状态错位、动画中断等现象。

加上正确的 key 后，Vue 就能根据唯一标识（如 item.id）精准定位每个元素：“这个 id=5 的用户始终是它自己”，该复用就复用，该新增就新增，该移除就移除。

怎么写 key 才算正确？

• 必须是字符串或数字类型，不能是对象或数组（否则控制台警告：Avoid using non-primitive value as key）
• 在同一父级下必须唯一，重复 key 会让 Vue 混淆，效果等同于没写
• 优先使用数据本身的稳定 ID，比如后端返回的 user.id、post.uuid、todo._id
• 绝对不要用 index 当 key，尤其当列表支持增删、拖拽、搜索过滤时——index 会随顺序变化而失效

v-for 遍历不同数据源的注意事项

遍历数组：v-for="item in list" 或 v-for="(item, i) in list"，配合 :key="item.id" 即可。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

立即学习“前端免费学习笔记（深入）”；

遍历对象：v-for="(value, key, index) in obj"，此时 key 是属性名（字符串），建议用 :key="key" ——但前提是属性名本身稳定且唯一；若不确定，可构造 :key="'obj-' + key" 避免冲突。

遍历数字：v-for="n in 5" 会生成 5 次（n 从 1 到 5），适合渲染固定数量的占位符，key 可直接用 :key="n"。

常见陷阱与绕过方案

• 同时写 v-if 和 v-for 在同一标签上？不推荐。v-if 优先级更高，会导致 v-for 的 item 不可用。应在外层加 <template> 包裹，或提前用计算属性过滤数据
• 列表项是自定义组件？key 必须写在组件标签上，而不是组件内部，否则无法生效
• 动态切换列表数据源（比如 tab 切换）？确保新旧列表的 key 规则一致，否则 Vue 会误判为全量替换