前提：
就是在实际开发中，我有一个编辑的弹窗，可以查看和编辑，因为弹窗里面是一个步骤条，点击下一步就要向对应的接口发送请求，考虑到就比如我点击下一步，此次表箱信息其实不需要修改，我要修改的是控制器的信息，那么点击下一步发送请求其实是没有必要的，我就考虑到了进行比对，如果没有变化就直接下一步，不发送请求
我的想法是，在点击编辑时，把变化前的值给一个变量（旧值），然后在点击下一步用现在的值和旧值进行对比
const editDataBox = ref<any>({});
const initialFormData = ref<any>({});
//编辑
const handleEdit = async (data: any) => {
editVisible.value = true;
//在弹窗弹出的时候，把传递过来的值给一个变量
initialFormData.value=data
editDataBox.value = data;
....
}
const isFormDataEqual = (formData1: any, formData2: any) => {
return JSON.stringify(formData1) === JSON.stringify(formData2);
};
//下一步
const editNext = () => {
switch (editCurrent.value) {
case 1:
const formDataChanged = !isFormDataEqual(editDataBox.value, initialFormData.value);
if (formDataChanged) {
...
}else{
editCurrent.value += 1;
}
}这是我刚开始的想法，原本我以为就是initialFormData这个值不会变化，然后我发现表单值变化了也没有发送请求，我就输出formDataChanged这个值，发现每次都是false,进而输出initialFormData它的值，就发现它既然是变化后的值，我就想问题在哪里，原因是：
在 JavaScript 中，当你将一个对象赋值给另一个变量时，实际上是将对象的引用赋值给了这个变量，而不是对象本身的拷贝。这意味着，如果你修改了其中一个变量所引用的对象，另一个变量也会受到影响，因为它们引用的是同一个对象。
在你的代码中，
initialFormData和editDataBox都是使用ref创建的响应式对象。当你在handleEdit函数中将data赋值给initialFormData.value和editDataBox.value时，它们实际上是引用了同一个对象。因此，当你修改
editDataBox.value后，initialFormData.value也会受到影响，因为它们引用的是同一个对象。为了避免这种情况，你需要确保
initialFormData和editDataBox引用的是不同的对象，而不是同一个对象的引用。这就是为什么需要进行深拷贝的原因，因为深拷贝会创建一个新的对象，其值与原始对象相同，但是引用不同，这样就可以独立地修改新对象而不影响原始对象。
我的解决办法是使用 JSON.parse() 和 JSON.stringify() 进行深拷贝，修改后的代码是，加了一个deepCopy函数进行深拷贝
JSON.parse() 和 JSON.stringify()
const editDataBox = ref<any>({});
const initialFormData = ref<any>({});
const deepCopy = (obj: any) => {
return JSON.parse(JSON.stringify(obj));
};
//编辑
const handleEdit = async (data: any) => {
editVisible.value = true;
initialFormData.value = deepCopy(data);
editDataBox.value = data;
....
}
const isFormDataEqual = (formData1: any, formData2: any) => {
return JSON.stringify(formData1) === JSON.stringify(formData2);
};
//下一步
const editNext = () => {
switch (editCurrent.value) {
case 1:
const formDataChanged = !isFormDataEqual(editDataBox.value, initialFormData.value);
if (formDataChanged) {
...
}else{
editCurrent.value += 1;
}
}使用 Object.assign():
这个方法只能实现浅拷贝，但如果对象的结构比较简单且不包含嵌套对象，也可以考虑使用它
const deepCopy = (obj) => {
return Object.assign({}, obj);
};
使用递归:
可以编写一个递归函数来遍历对象的所有属性，并对每个属性进行拷贝。这需要一些额外的代码，但也是一个有效的方法。
const deepCopy = (obj) => {
if (typeof obj !== 'object' || obj === null) {
return obj;
}
let newObj = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = deepCopy(obj[key]);
}
}
return newObj;
};
使用 Lodash 库
Lodash 提供了 _.cloneDeep() 方法，可以实现对象的深拷贝。这是一个非常流行且易于使用的方法。
const _ = require('lodash');
// 使用 _.cloneDeep() 进行深拷贝
const deepCopy = (obj) => {
return _.cloneDeep(obj);
};
深拷贝在编程中几个重要的优势和应用场景：
数据独立性: 深拷贝创建了原始对象的完全独立副本，这意味着修改拷贝后的对象不会影响原始对象。这对于需要在多个地方使用同一份数据，但又需要独立修改数据的情况非常有用。
避免引用问题: 在 JavaScript 中，如果你简单地将一个对象赋值给另一个变量，实际上是将对象的引用传递给了新变量。这意味着如果你修改了新变量中的对象，原始对象也会受到影响。深拷贝可以避免这种问题，因为它创建了一个完全独立的对象，不会共享内存地址。
数据传递: 在许多情况下，你可能需要将数据传递给其他函数或组件，并且希望确保传递的是数据的副本而不是引用。深拷贝可以确保你传递的是数据的完整副本，而不会影响原始数据。
数据比较: 当需要比较两个对象是否相等时，深拷贝可以确保比较的是对象的值而不是引用。这在进行单元测试、数据验证或其他需要比较对象的场景中非常有用。
总的来说，深拷贝是一种保护数据完整性和独立性的重要工具，可以帮助避免由于对象共享引起的意外行为，并确保数据在不同部分之间的传递和修改时保持一致。
你学会了吗？
嗯，可能有的朋友还不太了解JSON.parse() 和 JSON.stringify()？我也是一知半解。
我在想应该写在另一篇文章还是写在这里？emmm,还是重新写一个吧，可以点击跳转
最后，我也是刚入行时间不长的前端，如果有写的有什么问题欢迎指正与交流。