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

Question

是否有任何 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 上添加值。

有点不可思议

Answer 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)

Answer 2

当您使两个数组的值相等时，您通过引用使它们相等。 所以

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

array1 = foo;
array2 = foo;

array1.push('d');

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

是预期的行为。

但是，这与您问题中给出的示例不同。运行下面的 sn -p 看看有什么区别。

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

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"]