vue深拷貝的3種實現(xiàn)方式小結
更新時間：2023年02月21日 11:10:23 作者：nav-item
當使用同一個對象產(chǎn)生沖突時，可以使用lodash包，對該對象進行深拷貝，從而使操作的對象為不同的對象,這篇文章主要給大家介紹了關于vue深拷貝的3種實現(xiàn)方式,需要的朋友可以參考下
vue深拷貝的三種實現(xiàn)方式：1、通過遞歸方式實現(xiàn)深拷貝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法實現(xiàn)深拷貝。深拷貝：拷貝的是對象或者數(shù)組內(nèi)部數(shù)據(jù)的實體，重新開辟了內(nèi)存空間存儲數(shù)據(jù)；淺拷貝：拷貝的是引用類型的指針，副本和原數(shù)組或對象指向同一個內(nèi)存；
1、通過遞歸方式實現(xiàn)深拷貝
比較全面的深拷貝，缺點是較為繁瑣
function deepClone(obj) {
var target = {};
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
if (typeof obj[key] === 'object') {
target[key] = deepClone(obj[key]);
} else {
target[key] = obj[key];
}
}
}
return target;
}2、JSON.parse(JSON.stringify(obj))
滿足一般使用場景，但無法實現(xiàn)對象中方法(fountion)的深拷貝
let obj = {
id: 1,
name: '張三',
age: 10,
}
let newObj = JSON.parse(JSON.stringify(obj))3、jQuery的extend方法實現(xiàn)深拷貝
var array = [1,2,3,4]; var newArray = $.extend(true,[],array); // true為深拷貝，false為淺拷貝
拓展閱讀
vue深拷貝的其他實現(xiàn)方式
1、Object.assign(obj1, obj2)
只有一級屬性為深拷貝，二級屬性后就是淺拷貝
let obj = {
id: 1,
name: '張三',
age: 10,
}
let newObj = Object.assign({}, obj)2、擴展運算符
只有一級屬性為深拷貝，二級屬性后就是淺拷貝
var obj = {
a: 1,
b: 2
}
var obj1 = {…obj}3、數(shù)組使用數(shù)組方法進行深拷貝（concat、slice）
只有一級屬性為深拷貝，二級屬性后就是淺拷貝，如[1,2,3,[1,2,3]]
var arr1 = [1, 2, 3, 4] var arr2 = arr1.concat() var arr3 = arr1.slice(1)
總結
到此這篇關于vue深拷貝的3種實現(xiàn)方式的文章就介紹到這了,更多相關vue深拷貝實現(xiàn)方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
VUE使用vue-tree-color組件實現(xiàn)組織架構圖并可以動態(tài)更新數(shù)據(jù)的效果
本文主要介紹了如何在Vue中使用vue-tree-color組件實現(xiàn)組織架構圖,并詳細介紹了如何實現(xiàn)數(shù)據(jù)的動態(tài)加載,在動態(tài)加載數(shù)據(jù)時,要確保數(shù)據(jù)更新是在Vue的響應式系統(tǒng)能捕獲到的情況下進行的2024-10-10
這篇文章主要介紹了vue攔截器組件的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了vue項目打包后怎樣優(yōu)雅的解決跨域,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
今天小編就為大家分享一篇axios向后臺傳遞數(shù)組作為參數(shù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue實現(xiàn)鼠標移過出現(xiàn)下拉二級菜單功能
這篇文章主要介紹了vue實現(xiàn)鼠標移過出現(xiàn)下拉二級菜單功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
在Vue?3中,可以通過創(chuàng)建一個事件總線（event?bus）來實現(xiàn)組件之間的通信,要在Vue?3中使用事件總線,主要步驟有：1、創(chuàng)建一個新的Vue實例作為事件總線,2、在組件中引入并使用該事件總線,以下是詳細的步驟和示例,需要的朋友可以參考下2025-01-01
Vue?Router?返回后記住滾動條位置的實現(xiàn)方法
使用?Vue?router?創(chuàng)建?SPA(Single?Page?App),往往有這種需求：首頁是列表頁,點擊列表項進入詳情頁,在詳情頁點擊返回首頁后,希望看到的是,首頁不刷新,并且滾動條停留在之前的位置,這篇文章主要介紹了Vue?Router?返回后記住滾動條位置的實現(xiàn)方法,需要的朋友可以參考下2023-09-09
文章介紹了一個Vue組件,該組件允許用戶通過鼠標右鍵在畫布上繪制矩形,并且支持通過Ctrl鍵進行多選,文章附帶了組件代碼和一個示例,建議讀者將代碼復制到自己的開發(fā)環(huán)境中進行調(diào)試2024-12-12
這篇文章主要介紹了vue組件和iframe頁面的相互傳參問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
本篇文章主要介紹了手把手教你vue-cli單頁到多頁應用的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05