Vue中push()添加数据时覆盖数组原有元素问题咨询

问题原因 #

核心是对象的引用传递机制：子组件传给父组件的pc是同一个对象的内存引用，你每次调用getPC时只是把这个引用赋值后push到数组，数组里存的全是同一个对象的地址。当子组件后续修改这个对象的属性时，数组里所有元素都会同步变化，看起来就像被覆盖了。

解决方法 #

接收数据时创建一个新对象，把传入的pc属性复制进去，确保每次push的是独立的新对象，不再共享引用。

修改后的父组件代码：

<template>
  <Form :addPC="getPC" />
</template>

<script>
import Form from './components/Form.vue'
export default {
  name: 'App',
  components:{
    Form,
  },
  methods:{
    getPC(pc)
    {
      // 方案1：用展开运算符创建新对象（浅拷贝）
      const newPC = {...pc}
      // 方案2：用Object.assign复制属性（浅拷贝）
      // const newPC = Object.assign({}, pc)
      this.PCs.push(newPC)
      console.log(this.PCs)
    }
  },
  data(){
      return{
        PCs:[]
      }
    },
}
</script>

进阶补充（处理嵌套对象） #

如果pc包含嵌套对象（比如pc.details = {cpu: 'i7', ram: '16G'}），浅拷贝无法彻底隔离引用，需要用深拷贝：

// 方案1：JSON序列化（注意无法拷贝函数、Symbol等特殊类型）
const newPC = JSON.parse(JSON.stringify(pc))

// 方案2：自定义递归深拷贝（适合复杂对象场景）
function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj
  if (obj instanceof Date) return new Date(obj)
  if (obj instanceof Array) return obj.map(item => deepClone(item))
  const newObj = {}
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepClone(obj[key])
    }
  }
  return newObj
}
const newPC = deepClone(pc)

内容的提问来源于stack exchange，提问作者Hi there