vue中修改Modal的重置功能怎么寫？（重置不多帶帶調后臺接口）可利用深拷貝

rockswang 發布于2019-08-29 18:37 / 2087人閱讀

摘要：工作中遇到彈出模態框形式的修改功能，模態框里面是表單表單中的內容是從后臺獲取的，這時候用戶修改完沒有提交，而是想重置然后重新修改，怎么辦呢重新調一遍后臺的接口，將原始數據再一次放入中，這個方法可能會浪費資源，占用帶寬可以利用緩存可以利用深拷

工作中遇到彈出模態框形式的修改功能，模態框里面是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是這個Form綁定的:model
    //data是初始時Form的數據（修改前）
    this.formInline = copyArray(data)

這是深拷貝的json方式，深拷貝的方式有很多，可自行了解
說一下這種方式的原理吧
上面說過基本數據類型沒有深拷貝，json.stringify()將數組數據類型轉換成字符串數據類型
字符串屬于基本數據類型，基本數據類型是按值傳遞的

    var b = 1;
    var a = b;
    b++;
    console.log(a,b)//1,2

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

加油！每天進步一點點！

GPU云服務器云服務器 js中重置表格怎么重置wordpress asp整站后臺可修改怎么重置阿里云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114452.html

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

摘要：工作中遇到彈出模態框形式的修改功能，模態框里面是表單表單中的內容是從后臺獲取的，這時候用戶修改完沒有提交，而是想重置然后重新修改，怎么辦呢重新調一遍后臺的接口，將原始數據再一次放入中，這個方法可能會浪費資源，占用帶寬可以利用緩存可以利用深拷工作中遇到彈出模態框形式的修改功能，模態框里面是Form表單,Form表單中的內容是從后臺獲取的，這時候用戶修改完沒有提交，而是想重置然后重新修改...

Blackjun 2019-08-23 16:56 評論0 收藏0
jsliang 的 2019 面試準備

Create by jsliang on 2019-2-11 15:30:34 Recently revised in 2019-3-17 21:30:36 Hello 小伙伴們，如果覺得本文還不錯，記得給個 star ，小伙伴們的 star 是我持續更新的動力！GitHub 地址并不是只有特定的季節才能跑路，只因為人跑得多了，這條路就定下來了。金三銀四跳槽季，jsliang 于 2019...

PascalXie 2019-05-23 17:31 評論0 收藏0
數組（引用類型）復制問題

摘要：數組賦值問題涉及到拷貝堆棧空間基本數據類型和引用數據類型的差異。把數組值重置成輸出結果是把數組值重置成輸出結果是親測用等方法進行數組復制都是淺拷貝。數組賦值問題涉及到拷貝、堆棧空間、基本數據類型和引用數據類型的差異。（自行了解） var arrA = [1,2,3,4,5]; var arrB = arrA; // 把B數組值重置成0; arrB.fill(0); console.l...

余學文 2019-08-23 14:25 評論0 收藏0