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