是否有任何 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
上添加值。
有点不可思议
答案 0 :(得分: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);
答案 1 :(得分: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)