Vue 中使用 push() 向数组添加对象时数据被覆盖的解决方案-js教程-PHP中文网

Vue 中使用 push() 向数组添加对象时数据被覆盖的解决方案

在 vue 中向响应式数组添加对象时，若直接 push 原始对象引用，会导致数组中所有元素指向同一内存地址，从而出现“新增一项却覆盖全部”的现象；正确做法是深拷贝对象后再推入数组。

在 vue 中向响应式数组添加对象时，若直接 push 原始对象引用，会导致数组中所有元素指向同一内存地址，从而出现“新增一项却覆盖全部”的现象；正确做法是深拷贝对象后再推入数组。

当从子组件（如表单 Form）向父组件（App）传递对象数据并调用 push() 添加到响应式数组时，常见错误是直接将接收到的对象赋值后推入数组：

getPC(pc) {
  var PC = {}
  PC = pc // ❌ 此处仅复制了引用，未创建新对象
  this.PCs.push(PC)
}

由于 JavaScript 中对象是引用类型，PC = pc 并未创建新对象，而是让 PC 指向与 pc 相同的内存地址。后续每次调用 getPC() 都会将同一个引用重复推入 this.PCs，导致数组中所有元素实际指向同一对象——任一元素修改都会反映在全部位置，控制台打印也看似“全部被覆盖”。

✅ 正确解法：使用浅拷贝（适用于无嵌套对象的场景）断开引用关系：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

methods: {
  getPC(pc) {
    const newPC = { ...pc } // ✅ 使用展开运算符创建新对象
    this.PCs.push(newPC)
    console.log(this.PCs)
  }
}

⚠️ 注意事项：

若 pc 包含嵌套对象（如 pc.config.settings），{...pc} 仅做浅拷贝，深层属性仍为引用。此时应使用 JSON.parse(JSON.stringify(pc))（简单嵌套）或 structuredClone()（现代浏览器，支持深嵌套与 Map/Set 等）；

Vue 3 推荐搭配 ref() 或 reactive() 显式声明响应式状态，但本例中 data() 返回的 PCs 已自动响应式，无需额外处理；

避免在循环中反复赋值同一临时变量再 push，始终确保每次 push 的是独立实例。

通过确保每次 push() 的都是全新对象引用，即可彻底解决数组元素被意外覆盖的问题，保障多条 PC 数据独立、可响应地渲染与更新。