共计 694 个字符,预计需要花费 2 分钟才能阅读完成。
工作中遇到弹出模态框形式的修改功能,模态框里面是 Form 表单,Form 表单中的内容是从后台获取的,这时候用户修改完没有提交,而是想重置然后重新修改,怎么办呢?①重新调一遍后台的接口,将原始数据再一次放入 Form 中,这个方法可能会浪费资源,占用带宽②可以利用缓存③可以利用深拷贝简单解释一下深拷贝和浅拷贝 a 复制 b,修改 b,a 也发生改变,说明拷贝不彻底,此为浅拷贝,a 复制 b,修改 b,a 不变,此为深拷贝深拷贝一般复杂数据类型才会发生,原因是基本数据类型和复杂数据类型的存储方式不同。关于深拷贝和浅拷贝的文章有很多,想多了解的同学可以自行搜索下面直接说方法我们可以封装一个深拷贝函数,在随便一个 js 文件里面(根据自己的项目)
/**
* 深度拷贝
* @param {*} arr
*/
export const copyArray = (arr) => {
return JSON.parse(JSON.stringify(arr))
}
然后在你用到修改功能的 vue 文件中,直接引入使用就可以 le
import {copyArray} from ‘@/utils/util.js’
// 修改的时候
this.formInline = copyArray(data)
这是深拷贝的 json 方式,深拷贝的方式有很多,可自行了解说一下这种方式的原理吧上面说过基本数据类型没有深拷贝,json.stringify() 将数组数据类型转换成字符串数据类型字符串属于基本数据类型,基本数据类型是按值传递的
var b = 1;
var a = b;
b++;
console.log(a,b)//1,2
这时候进行拷贝,然后在将字符串转换成对象,就实现了深拷贝
加油!每天进步一点点!