解决vue A对象赋值给B对象,修改B属性会影响到A的问题

当将 A 对象赋值给 B 对象后，实际上只是将 B 对象指向了 A 对象在内存中的地址，而并不是新创建了一个对象。因此修改 B 对象的属性会影响到 A 对象的属性。为了解决这个问题，我们可以使用深拷贝或浅拷贝的方式来创建一个新的对象，从而避免修改一个对象的属性影响到另一个对象的属性。

以下是两条示例：

示例 1

let A = { name: 'Tom', age: 20 };
let B = Object.assign({}, A); // 浅拷贝

B.age = 25;

console.log(A.age); // 20
console.log(B.age); // 25

上述代码使用 Object.assign() 方法实现了浅拷贝，即将 A 对象的所有属性拷贝给 B 对象，然后修改 B 对象的 age 属性。最后输出 A.age 和 B.age 属性的值，可以看到它们的值是不同的，因为这是两个不同的对象。

示例 2

let A = { name: 'Tom', age: 20 };
let B = JSON.parse(JSON.stringify(A)); // 深拷贝

B.age = 25;

console.log(A.age); // 20
console.log(B.age); // 25

上述代码使用 JSON.parse(JSON.stringify()) 方法实现了深拷贝，即将 A 对象的所有属性递归地拷贝给 B 对象，然后修改 B 对象的 age 属性。最后输出 A.age 和 B.age 属性的值，可以看到它们的值是不同的，因为它们是两个不同的对象。但是需要注意的是，如果对象中存在函数、Symbol 和 undefined 等特殊类型，使用该方式进行深拷贝可能会出现问题，因为 JSON 对这些类型的支持并不完备。