工作中遇到弹出模态框形式的修改功能，模态框里面是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

这时候进行拷贝，然后在将字符串转换成对象，就实现了深拷贝。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/2893