javascript - 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.

有点令人难以置信

标签： javascriptvue.jsvuejs2

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