Vue 2 如何在列表渲染中使用合理的 key 属性避免 DOM 复用错误

在 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() 生成）

1. ✅ 正确：<li v-for="item in list" :key="item.id">{{ item.name }}</li>
2. ❌ 错误：:key="index"（插入/删除/排序后 index 变动，key 失效）
3. ❌ 危险：:key="Math.random()"（每次渲染都新建 DOM，性能崩坏）

同一父级下 key 必须真正唯一

Vue 只在同一组兄弟节点中比对 key。如果多个 v-for 块嵌套或并列，要确保它们各自范围内的 key 不重复。

1. 避免把不同来源的数据混在一个列表里还共用相同 ID 段（比如用户 ID 和文章 ID 都是数字 1~100）
2. 不确定时可加命名空间前缀：:key="'user-' + user.id" 或 :key="'post-' + post.slug"

遍历对象或数字时的 key 写法

不是所有 v-for 都在遍历数组，不同数据源 key 的取法有差异：

1. 遍历对象：v-for="(value, keyName) in obj" → 推荐 :key="keyName"（前提是属性名稳定唯一）；否则用 :key="'obj-' + keyName"
2. 遍历数字：v-for="n in 5" → 可直接 :key="n"（因为 n 是固定 1~5，无增删逻辑）

别让 v-if 和 v-for 出现在同一个标签上

Vue 2 中，v-if 优先级高于 v-for，会导致 key 在过滤后可能重复或缺失，引发警告甚至渲染异常。

1. ❌ 错误写法：<li v-for="item in list" v-if="item.visible" :key="item.id">
2. ✅ 正确做法：用计算属性预过滤：computed: { filteredList() { return this.list.filter(i => i.visible) } }，再 v-for 它