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”的每个项目的值设置为“ first”（应该是副本时，不引用数据“ test1”数组）之后，每个项目等于“ new”。 this.test1的值不变。

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

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

Answer 1

传播语法创建一个shallow copy。如果您的数组具有数字或字符串之类的原始类型，则不会更新原始数组。 test1就是这种情况。在第二种情况下，仅创建一个新数组。如果您从阵列中push或pop，原始阵列将不会被更新。但是，对象仍指向它们在内存中的相同位置。更新它们也会更新原始数组的对象。

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

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

您还可以使用JSON.parse和JSON.stringify。但是，如果对象具有任何功能属性，则将其删除。

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

Answer 2

尝试：

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

使用readpoperator或Array.from的复制方法仅适用于简单数组。对于深度复制，请将该方法与JSON.parse和JSON.stringify一起使用。

Answer 3

之所以这样，是因为您拥有Vue data values数组。因此，即使您要克隆该数组，也要复制每个引用原始数组的值“ getters”和“ setters”。为了删除吸气剂和吸气剂，您应该按照d-h-e的建议进行操作。

您也可以这样做。

    const second = this.test2.map(() => { name: 'New' } );
    console.log('second: ', second);
    console.log('test2 in data', this.test2);

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

3 个答案: