问题描述
所以我在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'的值在每个项目中都有'新'。
我不知道为什么会这样。 有任何想法吗？
1楼
adiga
2
已采纳
2019-02-21 08:15:41
Spread语法创建一个 。
如果您的数组具有数字或字符串等基本类型，则不会更新原始数组。
test1属于这种情况。
在第二种情况下，只创建一个新数组。
如果从阵列push或pop ，则不会更新原始阵列。
但是，对象仍指向内存中的相同位置。
更新它们也会更新原始数组的对象。
您可以在单个对象上使用扩展语法来创建对象的副本：
const second = this.test2.map(o => ({...o}))
您还可以使用JSON.parse和JSON.stringify 。
但是，如果对象具有任何函数属性，则它们将被删除。
const second = JSON.parse(JSON.stringify(this.test2))
2楼
d-h-e
1
2019-02-21 08:03:04
尝试使用：
const second = JSON.parse(JSON.stringify(this.test2));
使用spreadoperator或Array.from的复制方法仅适用于简单数组。 对于深层复制，请使用JSON.parse和JSON.stringify方法。
3楼
Miguel Coder
1
2019-02-21 08:16:36
这就是因为你有一个Vue data values数组。
因此，即使您正在克隆数组，您也要复制每个值'getters'和'setters'，它们都引用了原始数组。
为了删除getter和setter，你应该按照他们的建议去做。
你也可以这样做。
const second = this.test2.map(() => { name: 'New' } );
console.log('second: ', second);
console.log('test2 in data', this.test2);