第 22 课：反转记录时保持行身份

• 日期：2026-09-30
• 课程序号：第 22 课
• 知识点：稳定 key 下的数组反转

用途或适用场景

验证列表重排后每条练习记录仍由业务 ID 标识。

核心概念

用新数组替换列表顺序，模板继续以 item.id 为 key，不使用索引。

最小代码或操作示例

<button @click="lessons = [...lessons].reverse()">反转</button>
<li v-for="item in lessons" :key="item.id">{{ item.minutes }} 分钟</li>

3～5 分钟练习

提交两条不同 ID 的记录后反转两次。

参考答案

显示顺序先交换再恢复，每条记录的 ID 不变。

与上一课的联系

第 21 课为记录加入稳定 ID；本课只增加重排操作；下一课可为每行增加局部输入验证身份保持。

时效校验

时效校验：2026-09-30（Vue 3.5+；官方列表渲染文档仍推荐用唯一 key 保持状态，未见废弃标记。）

官方参考

• 官方文档