資訊專欄INFORMATION COLUMN
摘要：工作中遇到彈出模態(tài)框形式的修改功能，模態(tài)框里面是表單表單中的內(nèi)容是從后臺獲取的，這時候用戶修改完沒有提交，而是想重置然后重新修改，怎么辦呢重新調(diào)一遍后臺的接口，將原始數(shù)據(jù)再一次放入中，這個方法可能會浪費(fèi)資源，占用帶寬可以利用緩存可以利用深拷
工作中遇到彈出模態(tài)框形式的修改功能，模態(tài)框里面是Form表單,Form表單中的內(nèi)容是從后臺獲取的，這時候用戶修改完沒有提交，而是想重置然后重新修改，怎么辦呢？
①重新調(diào)一遍后臺的接口，將原始數(shù)據(jù)再一次放入Form中，這個方法可能會浪費(fèi)資源，占用帶寬
②可以利用緩存
③可以利用深拷貝
簡單解釋一下深拷貝和淺拷貝
a復(fù)制b，修改b，a也發(fā)生改變，說明拷貝不徹底，此為淺拷貝，a復(fù)制b，修改b，a不變，此為深拷貝
深拷貝一般復(fù)雜數(shù)據(jù)類型才會發(fā)生，原因是基本數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型的存儲方式不同。
關(guān)于深拷貝和淺拷貝的文章有很多，想多了解的同學(xué)可以自行搜索
下面直接說方法
我們可以封裝一個深拷貝函數(shù)，在隨便一個js文件里面（根據(jù)自己的項(xiàng)目）
/**
* 深度拷貝
* @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的數(shù)據(jù)（修改前）
this.formInline = copyArray(data)
這是深拷貝的json方式，深拷貝的方式有很多，可自行了解
說一下這種方式的原理吧
上面說過基本數(shù)據(jù)類型沒有深拷貝，json.stringify()將數(shù)組數(shù)據(jù)類型轉(zhuǎn)換成字符串?dāng)?shù)據(jù)類型
字符串屬于基本數(shù)據(jù)類型，基本數(shù)據(jù)類型是按值傳遞的
var b = 1;
var a = b;
b++;
console.log(a,b)//1,2
這時候進(jìn)行拷貝，然后在將字符串轉(zhuǎn)換成對象，就實(shí)現(xiàn)了深拷貝
加油！每天進(jìn)步一點(diǎn)點(diǎn)！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114452.html
摘要：工作中遇到彈出模態(tài)框形式的修改功能，模態(tài)框里面是表單表單中的內(nèi)容是從后臺獲取的，這時候用戶修改完沒有提交，而是想重置然后重新修改，怎么辦呢重新調(diào)一遍后臺的接口，將原始數(shù)據(jù)再一次放入中，這個方法可能會浪費(fèi)資源，占用帶寬可以利用緩存可以利用深拷 工作中遇到彈出模態(tài)框形式的修改功能，模態(tài)框里面是Form表單,Form表單中的內(nèi)容是從后臺獲取的，這時候用戶修改完沒有提交，而是想重置然后重新修改...
Create by jsliang on 2019-2-11 15:30:34 Recently revised in 2019-3-17 21:30:36 Hello 小伙伴們，如果覺得本文還不錯，記得給個 star ， 小伙伴們的 star 是我持續(xù)更新的動力！GitHub 地址 并不是只有特定的季節(jié)才能跑路，只因?yàn)槿伺艿枚嗔?，這條路就定下來了。 金三銀四跳槽季，jsliang 于 2019...
摘要：數(shù)組賦值問題涉及到拷貝堆?？臻g基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的差異。把數(shù)組值重置成輸出結(jié)果是把數(shù)組值重置成輸出結(jié)果是親測用等方法進(jìn)行數(shù)組復(fù)制都是淺拷貝。 數(shù)組賦值問題涉及到拷貝、堆?？臻g、基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的差異。（自行了解） var arrA = [1,2,3,4,5]; var arrB = arrA; // 把B數(shù)組值重置成0; arrB.fill(0); console.l...
閱讀 965·2023-04-25 23:54
閱讀 3049·2021-11-08 13:21
閱讀 3776·2021-09-27 13:35
閱讀 3395·2021-07-26 23:41
閱讀 1059·2019-08-30 15:52
閱讀 3444·2019-08-30 11:27
閱讀 2101·2019-08-29 18:37
閱讀 543·2019-08-29 17:24
