0

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

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

附加信息我有一个非常相似的组件，它完全相同data variables，但不会发生，仅在第二个组件上。

array1 = [];
array2 = [];

array1.push('gether');

输出应该是

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

实际发生的事情

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

我也玩过 Google DevTools Vue 调试器。

array1在ONLY上添加条目也会在array2.

有点令人难以置信

4

2 回答 2

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); // Outputs ["a", "b", "c"]
console.log(array5); // Outputs ["a", "b"]

于 2021-06-30T17:33:11.107 回答
1

因为 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)
于 2021-06-30T17:42:34.163 回答