vue~对象的浅拷贝

浅拷贝

当我们想要复制一段数据的时候吗，我们就会用到拷贝；拷贝数据又分为了浅拷贝和深拷贝，浅拷贝指复制对象或数组的顶层结构，如果对象或数组中有引用类型的属性值，复制的是引用（地址）而非值；而深拷贝则是递归复制完整的对象或数组，包括嵌套的子对象或子数组，生成一个全新的对象，新对象和原对象的引用地址不同。

javascript中的实现
JavaScript 中可以使用不同方法实现对象的浅拷贝。浅拷贝只复制对象的第一层属性，不会复制嵌套对象内部的属性。以下是几种常见的浅拷贝方法：

1. 扩展运算符（Spread Operator）：
使用扩展运算符 … 可以创建一个对象的浅拷贝：
const originalObj = { name: ‘John’, age: 30 };
const newObj = { …originalObj };
newObj.name = ‘Jane’;
console.log(originalObj.name); // 输出 ‘John’，原始对象不受影响
console.log(newObj.name); // 输出 ‘Jane’，新对象被修改

2. Object.assign() 方法：
Object.assign() 方法可以将一个或多个对象的属性复制到目标对象中，也可以用来创建对象的浅拷贝：
const originalObj = { name: ‘John’, age: 30 };
const newObj = Object.assign({}, originalObj);
newObj.name = ‘Jane’;

console.log(originalObj.name); // 输出 ‘John’，原始对象不受影响
console.log(newObj.name); // 输出 ‘Jane’，新对象被修改
这些方法都可以用来创建对象的浅拷贝，但请注意，如果对象中包含嵌套对象，这些嵌套对象仍然是引用关系，所以修改嵌套对象会影响到原始对象。如果需要深拷贝，即递归复制对象及其嵌套对象的属性，需要使用其他方法，如 Lodash 的 _.cloneDeep() 方法。

vue.js中使用扩展运算符实现浅拷贝
let searchForm = {…this.searchForm};
this.searchForm 是一个对象，通过 {…this.searchForm} 这个表达式，创建了一个新对象，新对象包含了与 this.searchForm 相同的属性和属性值。

这个操作实际上是在创建 searchForm 对象的副本，而不是将原始对象直接赋值给 searchForm。这意味着如果你后续修改 searchForm，不会影响到原始的 this.searchForm 对象，因为它们是两个不同的对象。
这种操作通常用于对象或数组的复制，以便在不影响原始数据的情况下进行修改。这是一种浅拷贝，因为它只复制了对象的第一层属性，如果对象中包含了嵌套对象，嵌套对象仍然是引用，修改嵌套对象会影响到原始对象。
以下是一个示例：
let originalObj = { name: ‘John’, age: 30 };
let newObj = { …originalObj };
newObj.name = ‘Jane’;

console.log(originalObj.name); // 输出 ‘John’，原始对象不受影响
console.log(newObj.name); // 输出 ‘Jane’，新对象被修改
这是Vue.js中常见的一种数据处理方式，通常用于确保在处理数据时不会直接修改原始数据，以便在需要时进行撤销或回滚操作。