学用php做网站,制作网站微信登陆入口,渭南中学校园网站建设工作汇报,上海有名网站建站开发公司前提#xff1a;
就是在实际开发中#xff0c;我有一个编辑的弹窗#xff0c;可以查看和编辑#xff0c;因为弹窗里面是一个步骤条#xff0c;点击下一步就要向对应的接口发送请求#xff0c;考虑到就比如我点击下一步#xff0c;此次表箱信息其实不需要修改#xff0…前提
就是在实际开发中我有一个编辑的弹窗可以查看和编辑因为弹窗里面是一个步骤条点击下一步就要向对应的接口发送请求考虑到就比如我点击下一步此次表箱信息其实不需要修改我要修改的是控制器的信息那么点击下一步发送请求其实是没有必要的我就考虑到了进行比对如果没有变化就直接下一步不发送请求 我的想法是在点击编辑时把变化前的值给一个变量旧值然后在点击下一步用现在的值和旧值进行对比
const editDataBox refany({});
const initialFormData refany({});
//编辑
const handleEdit async (data: any) {editVisible.value true;
//在弹窗弹出的时候把传递过来的值给一个变量initialFormData.valuedata
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 refany({});
const initialFormData refany({});
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,还是重新写一个吧可以点击跳转
最后我也是刚入行时间不长的前端如果有写的有什么问题欢迎指正与交流。
