使用push添加数据时，改变其中一条数据导致其他的数据随之改变

vue使用push添加数据时，改变其中一条数据导致其他的数据随之改变
1.在写vue后台项目时，使用push向数组中添加多条相同的数据，修改其中一条数据，其他的数据随之改变。

出现这个问题的原因是，push的并不是一个值，而是一个地址，数组都指向同一个地址，就好比data.itemList[0]和 data.itemList[1]都是指向item的。每一次push就等于改变了数组的地址，所以会导致每个元素都变成了最后push的内容 。

当使用push添加多条数据时，多条数据指向的是同一个内存地址，修改其中一条数据相当于修改了所指内存的值，所以每条数据都改变了。

bug出现场景
添加数据的时候，前端设置一个addArr的点击事件后续在对数据进行数组中某一项
数据进行更改时，数组中所有子元素此属性会全部发生变化，从而影响整体数据（
当修改其中一条数据时，其他数据随之改变）

    addArr() {
      //data中的obj的数据
      //   obj = {
      //     name:'aaa',
      //     sex:'未知',
      //     age:'18'
      // }
      //data中默认是空数组
      // this.list = []

      this.list.push(JSON.parse(JSON.stringify(this.obj)))
    },
    

解决方案

方法一：

每次将要push的数据都存在另外单独开辟的空间中。这样就不会导致，整个数组都是指向一个内存地址。

 addArr() {
    
    
  let obj = {
    
    
          name:'aaa',
          sex:'未知',
          age:'18'
      }
      this.list.push(obj)
    },

方法二：

JS深拷贝，在这里普及一下JS的深拷贝和浅拷贝的区别
在JavaScript中，浅拷贝只是复制了原数据的内存地址，相当于两个数据指针指向了相同的地址，任意一个数据元素发生改变，会影响另一个；而深拷贝的两个数据指向了不同的地址，任意一个元素发生改变，不会影响另一个。所以合理运用JS深拷贝，就能解决多条数据指向的是同一个内存地址，修改其中一条数据相当于修改了所指内存的值，导致每条数据都改变导致的数据污染问题

addArr() {
    
    
this.list.push(JSON.parse(JSON.stringify(this.obj)))
}