JavaScript对象字面量中重复键名会静默覆盖前值，这是ES规范要求的语义行为，而非Vue等框架的问题；正确做法是用数组存储多个独立对象，每个对象内部id为属性值，并配合v-for渲染。
JavaScript对象字面量中重复键名会静默覆盖前值，这不是Vue或框架的问题，而是语言本身的语义规则。只要理解对象键必须唯一这一前提，就能避开绝大多数相关陷阱。
对象字面量重复键名必然被覆盖
当你写：{ id: 1, id: 2, id: 3 }
它在语法上合法，但执行后等价于：{ id: 3 }
因为ES规范要求：同名属性后出现的值无条件覆盖前面的值，解析阶段就完成合并，不存在“保留多个”的可能。
别用对象模拟列表结构
想表达多个带id的项时，错误做法是：const images = { id: 1, id: 2, id: 3 };
正确做法是用数组存储独立对象：const images = [ { id: 1 }, { id: 2 }, { id: 3 } ];
每个对象内部的 id 是属性值，不是键名；数组索引天然唯一，不会冲突。
动态赋值时警惕隐式键转换
把对象当键用（如 a[b] = 123）会触发 ToPropertyKey 转换：
• 普通对象默认转成 "[object Object]"
• 所有未自定义 toString 的对象都会变成同一个字符串键
• 结果就是后赋值覆盖前赋值
立即学习“Java免费学习笔记（深入）”；
- 避免用普通对象作键，改用
Map（支持任意类型键） - 或用
Symbol生成唯一键：const key = Symbol(); a[key] = 123; - 或显式构造唯一字符串标识，比如
b.id || b.uuid || JSON.stringify(b)
循环中构建对象数组要创建新实例
常见错误是在循环外声明对象，再 push 到数组：let item = {}; for (...) { item.name = data[i].name; arr.push(item); }
结果是数组里所有元素都引用同一个对象。
- 每次迭代都新建对象：
arr.push({ name: data[i].name }) - 或用解构复制：
arr.push({ ...item, name: data[i].name }) - 避免直接修改外部对象再 push 引用
