Question

是否有任何 vuejs 老手在 VueJS(v2) 上体验过这种情况，其中您在一个组件上有 2 个数组，并且您将一个值推送到第一个数组，而第二个数组也无需触摸它即可获得该值。

这是我第一次遇到这种情况，仅供参考，我已经使用 VueJS 超过 2 年了。

其他信息我有一个非常相似的组件，它具有完全相同的 data variables，但它没有发生，仅在第二个组件上发生。

array1 = [];
array2 = [];

array1.push('gether');

输出应该是

array1 = ['gether'];
array2 = [];

实际发生了什么

array1 = ['gether'];
array2 = ['gether'];

我还使用过 Google DevTools Vue Debugger。

仅在 array1 上添加条目也会在 array2 上添加值。

有点不可思议

Answer 1

当你让两个数组等于相同的值时，你就是让它们通过引用相等。所以

foo = ['a', 'b', 'z']

array1 = foo;
array2 = foo;

array1.push('d');

console.log(array2) //Outputs: ['a', 'b', 'c', 'd']

是预期的行为。

但是，这与您问题中的给定示例不同。运行下面的代码片段以查看差异。

为避免这种情况，您可以使用 slice() 创建原始数组的副本。我在代码片段中添加了一个示例。

let foo = ["a", "b"];

let array1 = foo;
let array2 = foo;

array2.push("c");

console.log(foo); // Outputs ["a", "b", "c"]
console.log(array1); // Outputs ["a", "b", "c"]

let array3 = [];
let array4 = [];

array4.push("a");

console.log(array3); // Outputs []
console.log(array4); // Outputs ["a"]

let bar = ["a", "b"];

let array5 = bar.slice();

bar.push("c");

console.log(bar);
console.log(array5);

Answer 2

因为 JS 中的数组是引用值，所以当你尝试使用 = 复制它时，它只会复制对原始数组的引用，而不是数组的值。要创建数组的真实副本，您需要将数组的值复制到新值变量下。这样这个新数组就不会引用内存中的旧数组地址。

要实现这一点，您可以使用 array.slice() 方法，因为它会创建一个新数组，而不仅仅是引用！

查看示例并了解差异=>

使用参考 (=)

let array = ["some text"]

// Making it equal to main array  and using reference to copy 
array1 = array;
array2 = array;

array1.push('gether');
console.log(array2)

使用 array.slice() 进行克隆

let array = ["some text"]

// Making it equal to main array and using slice to copy 
array1 = array.slice(); 
array2 = array.slice();

array1.push('gether');

console.log(array2)

VueJS 推送到一个数组也会将值推送到另一个

2 个答案: