在 vue 2 中，v-for 的 key 必须显式写出且稳定唯一，优先用后端返回的业务 id；禁用 index 或 math.random()；同一父级下 key 要真正唯一，避免 v-if 与 v-for 同标签使用。
在 Vue 2 中，v-for 渲染列表时，key 是必须显式写出的属性，不是可选项。漏掉、写错或用不稳定的值，会直接导致 DOM 复用错位——比如输入框内容跳到别的项、勾选状态跟着数据“漂移”、拖拽后顺序混乱、过渡动画中断等。
必须用稳定唯一的数据 ID
优先使用后端返回的、业务上不变的标识字段，例如：
– user.id、post.uuid、todo._id
– 即使数据临时没有 ID，也应在渲染前补一个（如用 Symbol() 或 uuidv4() 生成）
- ✅ 正确：
<li v-for="item in list" :key="item.id">{{ item.name }}</li> - ❌ 错误：
:key="index"（插入/删除/排序后 index 变动，key 失效） - ❌ 危险：
:key="Math.random()"（每次渲染都新建 DOM，性能崩坏）
同一父级下 key 必须真正唯一
Vue 只在同一组兄弟节点中比对 key。如果多个 v-for 块嵌套或并列，要确保它们各自范围内的 key 不重复。
- 避免把不同来源的数据混在一个列表里还共用相同 ID 段（比如用户 ID 和文章 ID 都是数字 1~100）
- 不确定时可加命名空间前缀：
:key="'user-' + user.id"或:key="'post-' + post.slug"
遍历对象或数字时的 key 写法
不是所有 v-for 都在遍历数组，不同数据源 key 的取法有差异：
- 遍历对象：
v-for="(value, keyName) in obj"→ 推荐:key="keyName"（前提是属性名稳定唯一）；否则用:key="'obj-' + keyName" - 遍历数字：
v-for="n in 5"→ 可直接:key="n"（因为 n 是固定 1~5，无增删逻辑）
别让 v-if 和 v-for 出现在同一个标签上
Vue 2 中，v-if 优先级高于 v-for，会导致 key 在过滤后可能重复或缺失，引发警告甚至渲染异常。
- ❌ 错误写法：
<li v-for="item in list" v-if="item.visible" :key="item.id"> - ✅ 正确做法：用计算属性预过滤：
computed: { filteredList() { return this.list.filter(i => i.visible) } }，再v-for它
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
