vue中修改Modal的重置功能怎麼寫？（重置不單獨調後臺接口）可利用深拷貝

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

這時候進行拷貝，然後在將字符串轉換成對象，就實現了深拷貝

加油！每天進步一點點！