在 Vue 应用中，若尝试用相同键名（如多个 id）定义 JavaScript 对象，由于对象键唯一性约束，仅最后一个赋值生效；正确做法是改用数组存储多个结构化项，并配合 v-for 渲染。
在 vue 应用中，若尝试用相同键名（如多个 `id`）定义 javascript 对象，由于对象键唯一性约束，仅最后一个赋值生效；正确做法是改用数组存储多个结构化项，并配合 `v-for` 渲染。
JavaScript 对象的键（key）必须是唯一的——这是语言底层规范，与 Vue 无关。当你在代码中这样赋值：
images.value = {
id: 1,
id: 2,
id: 3,
};等价于：
images.value = { id: 3 };因为后一个 id 属性会完全覆盖前两个，最终对象仅保留 { id: 3 }。因此 <h2>{{ images }}</h2> 渲染出的只是 "[object Object]"（默认 toString 结果），且实际内容仅含单个 id 字段，自然无法体现“多个图片”的语义。
✅ 正确建模方式：使用数组 + 对象组合
若需表示多个图片资源（每个有独立 id），应将数据结构设计为对象数组：
images.value = [
{ id: 1 },
{ id: 2 },
{ id: 3 }
];此时每个元素是独立对象，id 作为各对象内部属性可重复，无冲突。
立即学习“前端免费学习笔记（深入）”；
✅ 模板中正确渲染：配合 v-for 和 :key
在模板中遍历数组，逐项渲染：
<template>
<div id="app">
<h2 v-for="image in images" :key="image.id">
图片 ID：{{ image.id }}
</h2>
</div>
</template>⚠️ 关键注意事项：
- :key 必须使用稳定且唯一的值（推荐用 image.id，而非 index），否则 Vue 的 diff 算法可能引发状态错乱或性能问题；
- 若 id 非唯一（如来自非规范数据源），需提前处理（例如生成 UUID 或组合键）；
- 直接插值 {{ images }} 仅适用于调试查看结构（建议配合 JSON.stringify(images, null, 2) 格式化），生产环境应明确渲染字段。
? 扩展建议：
如需支持增删改查，可封装为组合式函数：
// composables/useImages.js
import { ref } from 'vue'
export function useImages() {
const images = ref([])
const addImage = (id) => {
images.value.push({ id })
}
const removeImage = (targetId) => {
images.value = images.value.filter(img => img.id !== targetId)
}
return { images, addImage, removeImage }
}结构清晰、语义准确、响应式可靠——这才是 Vue 数据驱动 UI 的正确打开方式。
