Vue 在复制数据后更改数据中的数组

Question

所以我在 vue 中有这个代码：

export default {
 name: 'Test',
  data() {
    return {
      test1: ['1', '2', '3'],
      test2: [{
        name: 'Hello'
      }, {
        name: 'Number two'
      }, {
        name: 'What ever'
      }], 
     };
  },
 created() {    
    const first = [...this.test1];
    first.forEach((elm, index) =>  first[index] = 'New');
    console.log('first: ', first);
    console.log('test1 in data', this.test1);

    const second = [...this.test2];
    second.forEach(elm => elm.name = 'New');
    console.log('second: ', second);
    console.log('test2 in data', this.test2);
  },
}

在设置数组“first”（应该是不引用数据“test1”数组的副本）的每个项目的值后，每个项目都等于“new”。this.test1 的值不会改变。

我对 test2 也做了同样的事情。复制并将每个项目的值更改为“新建”。但是现在数据数组'test2'的值在每个项目中也有'New'。

我不知道为什么会这样。有任何想法吗？

Answer 1

传播语法创建一个浅拷贝。如果您的数组具有数字或字符串等基本类型，则不会更新原始数组。情况就是这样test1。在第二种情况下，只创建一个新数组。如果您push或pop来自数组，则不会更新原始数组。但是，对象仍然指向它们在内存中的同一个位置。更新它们也会更新原始数组的对象。

您可以在单个对象上使用 spread 语法来创建对象的副本：

const second = this.test2.map(o => ({...o}))

您还可以使用JSON.parse和JSON.stringify。但是，如果对象具有任何函数属性，它们将被删除。

const second = JSON.parse(JSON.stringify(this.test2))