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