Vue数组push方法导致数据覆盖的解决方案

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

在 Vue 开发中，向响应式数组添加对象数据是一个基础操作，但开发者常会遇到一个典型问题：明明只新增了一条数据，结果列表中的所有条目都变成了最新添加的那一条。这种现象的根源，与 JavaScript 中对象作为引用类型的核心特性密切相关。

设想一个常见场景：一个子组件（例如表单）负责收集数据并传递给父组件。父组件接收到数据对象后，需要将其添加到一个用于展示的数组中。许多开发者可能会写出类似下面的代码：

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

问题的关键在于 PC = pc 这一行。在 JavaScript 中，对象变量存储的是指向对象内存地址的“引用”，而非对象本身。因此，PC = pc 并未创建新对象，只是让变量 PC 与变量 pc 指向了内存中的同一地址。

其结果是，每次调用 getPC 方法时，推入数组 this.PCs 的都是同一个对象的引用。数组中的所有元素本质上指向同一份数据。因此，无论修改数组中的哪个元素，或后续添加新数据，所有条目都会同步变化，在控制台中表现为新增数据“覆盖”了之前的所有数据。

正确的解决方案：断开引用链

解决此问题的核心思路是：在将对象推入数组前，必须创建一个全新的、独立的对象副本，以切断与原始数据的引用关系。最直接有效的方法是使用浅拷贝。

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

上述代码中，{ ...pc } 利用 ES6 的展开运算符，生成了 pc 对象的一个浅拷贝副本 newPC。这样，每次推入数组的都是一个独立的新对象，数据之间互不干扰。

需要特别注意的几点：

• 浅拷贝的局限性：如果 pc 对象内部嵌套了其他对象（例如 pc.config.settings），那么 {...pc} 只能拷贝第一层属性，嵌套的对象仍是引用。此时需要深拷贝。对于简单数据结构，可使用 JSON.parse(JSON.stringify(pc))；在现代浏览器环境中，更推荐使用原生的 structuredClone() 方法，它能处理更复杂的嵌套类型及 Map、Set 等。
• Vue 3 的响应式：在 Vue 3 中，虽然推荐使用 ref() 或 reactive() 显式声明响应式状态，但本例中通过 data() 返回的 PCs 数组默认是响应式的，无需额外处理。重点始终是保证推入的是新对象。
• 避免循环中的陷阱：在循环体内进行 push 操作时，务必确保每次迭代都生成一个全新的对象实例，不要重复使用同一个临时变量。

总结而言，在 Vue 中操作响应式数组时，牢记“推入新对象，而非旧引用”这一原则，即可从根本上避免数据被意外覆盖的问题，确保列表中的每条数据都能独立、正确地进行渲染和更新。