key 是 Vue 认「这一行是谁」的身份证。用 i（位置）当身份证，一旦在头部插入或删除数据，
所有人的身份证同时换号，Vue 就会把旧 DOM 节点按位置套到新人身上 —— 勾选框、输入框这些「存在 DOM 里的状态」就跟着错位。
下面四个现场，每点一个按钮，结论会打进底部迷你控制台。
| 规矩 | 说明 |
|---|---|
| 唯一 | 同一层列表里不能重复，否则 Vue 警告 Duplicate keys，节点归属直接乱 |
| 稳定 | 同一个数据项在任何一次渲染中 key 都不变。数据库 id、crypto.randomUUID() 都行；Math.random()、下标都不行 |
| 这三种场景别用 index | ① 列表会插入/删除/排序；② 行内有未受控 DOM 状态（勾选框、输入框、聚焦、动画）；③ 组件实例作为行（子组件内部状态会串到人身上）。只有「纯展示、永不重排」的静态列表才勉强可用 index |
| 可遍历的数据 | 写法 | 回调参数 |
|---|---|---|
| 数组 | v-for="(u, i) in users" | 项、下标（从 0） |
| 对象 | v-for="(val, key, i) in obj" | 值、键名、下标；顺序跟随 Object.keys |
| 数字 | v-for="n in 5" | n 是 1..5，不是 0..4 |
| 字符串 | v-for="ch in 'abc'" | 逐个字符 + 下标 |