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