解讀vue項(xiàng)目中遇到的深拷貝淺拷貝問題
vue項(xiàng)目的深拷貝淺拷貝問題
遇到的問題
使用element-ui修改表單文本框的數(shù)據(jù)時(shí)，無論確定還是取消，頁面數(shù)據(jù)都在同步修改
原因：
復(fù)雜類型的賦值是淺拷貝，直接賦值 會(huì)導(dǎo)致雙向修改
解決的方法：
將淺拷貝轉(zhuǎn)換成深拷貝
解決思路：
先把該對(duì)象轉(zhuǎn)成字符串(普通數(shù)據(jù)類型), 就沒有引用類型的影響了。再轉(zhuǎn)回對(duì)象使用。
轉(zhuǎn)換方式 ：
JSON.parse(JSON.stringify(對(duì)象))
這里簡(jiǎn)述下深拷貝淺拷貝的概念
淺拷貝： 將A對(duì)象賦值給B對(duì)象，修改B對(duì)象的屬性和方法會(huì)影響到A對(duì)象的屬性和方法。
深拷貝： 將A對(duì)象賦值給B對(duì)象，修改B對(duì)象的屬性和方法不會(huì)影響到A對(duì)象的屬性和方法。
vue深拷貝、淺拷貝的區(qū)別
1、淺拷貝
this.ProductionLineForm = {
"produeLineName": "產(chǎn)線1",
"departmentId": 1,
"produceLineStatus": 0,
"director": 5,
"description": "測(cè)試產(chǎn)線",
"keyCraftNodeId":1
}
let productionLineForm = this.ProductionLineForm;
productionLineForm.produeLineName = '修改名稱'
console.info('this.ProductionLineForm', this.ProductionLineForm)查看原form的值：
2、深拷貝
使用JSON.parse(JSON.stringify(要拷貝的對(duì)象))。
JSON.stringify()對(duì)象轉(zhuǎn)為串，JSON.parse()串轉(zhuǎn)為對(duì)象，JSON操作是深拷貝操作。
this.ProductionLineForm = {
"produeLineName": "產(chǎn)線1",
"departmentId": 1,
"produceLineStatus": 0,
"director": 5,
"description": "測(cè)試產(chǎn)線",
"keyCraftNodeId": 1
}
let productionLineForm = JSON.parse(JSON.stringify(this.ProductionLineForm));
productionLineForm.produeLineName = '修改名稱'
console.info('this.ProductionLineForm', this.ProductionLineForm)查看原form的值：
對(duì)比發(fā)現(xiàn)，淺拷貝，在修改productionLineForm的參數(shù)時(shí)，原form也被修改。而深拷貝修改參數(shù)不會(huì)影響原form的值。
注意：
淺拷貝：新對(duì)象賦值，只是取的舊對(duì)象棧中的值，也就是引用對(duì)象的值
深拷貝：會(huì)在堆里邊開辟一個(gè)空間，存放自己的對(duì)象值
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3項(xiàng)目剛創(chuàng)建就報(bào)錯(cuò)的問題及解決
這篇文章主要介紹了Vue3項(xiàng)目剛創(chuàng)建就報(bào)錯(cuò)的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue2.0 移動(dòng)端實(shí)現(xiàn)下拉刷新和上拉加載更多的示例
本篇文章主要介紹vue2.0 移動(dòng)端實(shí)現(xiàn)下拉刷新和上拉加載更多的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
本文主要介紹了vue中實(shí)現(xiàn)千位分隔符的示例代碼,主要兩種方法,一種是某一個(gè)字段轉(zhuǎn)換,一種是表格table中的整列字段轉(zhuǎn)換,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
vue?禁止重復(fù)點(diǎn)擊發(fā)送多次請(qǐng)求的實(shí)現(xiàn)
本文主要介紹了vue?禁止重復(fù)點(diǎn)擊發(fā)送多次請(qǐng)求的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
vue+el-table點(diǎn)擊表頭實(shí)現(xiàn)改變其當(dāng)前樣式
這篇文章主要介紹了vue+el-table點(diǎn)擊表頭實(shí)現(xiàn)改變其當(dāng)前樣式問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了element-ui如何在table中使用tooltip問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要給大家介紹了關(guān)于uniapp的核心知識(shí)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10
這篇文章主要介紹了vant 自定義 van-dropdown-item的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue2.x element-ui實(shí)現(xiàn)pc端購物車頁面demo
這篇文章主要為大家介紹了vue2.x element-ui實(shí)現(xiàn)pc端購物車頁面demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
用多了 JQuery ，習(xí)慣了使用JQuery的API操作 DOM ，幾乎忘記了原生JS對(duì)DOM操作，今天在項(xiàng)目中遇到了文字和圖片混輸?shù)那闆r，小編給大家分享Vue實(shí)現(xiàn)圖片與文字混輸效果，感興趣的朋友一起看看吧2019-12-12