vue對象的深度克隆方式
更新時間：2022年09月08日 09:07:40 作者：久違°
這篇文章主要介紹了vue對象的深度克隆方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue對象的深度克隆
方法1
通過js序列化，將js轉(zhuǎn)換成字符串，然后再將字符串轉(zhuǎn)換成js對象
var olbObj = {a:1};
var str = JSON.stringify(obj); //序列化對象
var newobj = JSON.parse(str); //還原
//相當(dāng)于
var newObj = JSON.parse(JSON.stringify(olbObj ))方法2
ES6語法對象展開運算符進(jìn)行對象的展開賦值
var a = {a:0}
var b = {...a}方法3
進(jìn)行對象的遍歷復(fù)制，對 對象的每一條屬性進(jìn)行復(fù)制，這樣就能進(jìn)行對象的深度克隆
function newobj(obj) {
? var str, newobj = obj.constructor === Array ? [] : {};
? //constructor 屬性返回對創(chuàng)建此對象的數(shù)組函數(shù)的引用。創(chuàng)建相同類型的空數(shù)據(jù)
? if (typeof obj !== 'object') {
? ? return;
? } else {
? ? for (var i in obj) {
? ? ? if (typeof obj[i] === 'object'){//判斷對象的這條屬性是否為對象
? ? ? ? newobj[i] = newObj(obj[i]);//若是對象進(jìn)行嵌套調(diào)用
? ? ? }else{
? ? ? ? newobj[i] = obj[i];
? ? ? }
? ? }
? }
? return newobj;//返回深度克隆后的對象
}vue克隆對象時遇到的問題
我們知道 當(dāng)我們需要深克隆一個對象 或者數(shù)組時 改變這個得到的數(shù)據(jù)，原數(shù)據(jù)保持不變 比較簡單的用到的函數(shù)基本都是
let b = JSON.parse(JSON.stringify(a))
但是假如我們克隆一個vue響應(yīng)式對象時 發(fā)現(xiàn)用這個方法沒啥用
所以需要一個工具函數(shù)老深克隆
//深克隆?
export const deepClone = (source) => {
? var sourceCopy = source instanceof Array ? [] : {}
? for (var item in source) {
? ? sourceCopy[item] = typeof source[item] === 'object' ? deepClone(source[item]) : source[item]
? }
? return sourceCopy
}
let b = deepClone (a)這樣就得到響應(yīng)式的啦
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-cli腳手架-bulid下的配置文件,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
Vue?調(diào)用攝像頭掃描條碼功能實現(xiàn)代碼
本文介紹了如何使用Vue.js和jsQR庫來實現(xiàn)調(diào)用攝像頭并掃描條碼的功能,通過安裝依賴、獲取攝像頭視頻流、解析條碼等步驟,實現(xiàn)了從開始掃描到停止掃描的完整流程,同時,還強(qiáng)調(diào)了瀏覽器兼容性、HTTPS環(huán)境、權(quán)限問題和性能優(yōu)化的重要性,感興趣的朋友一起看看吧2025-03-03
這篇文章主要為大家詳細(xì)介紹了vue.js響應(yīng)式原理解析與實現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
Vue實現(xiàn)省市區(qū)三級聯(lián)動el-select組件的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)省市區(qū)三級聯(lián)動el-select組件的方法，文中的示例代碼講解詳細(xì)，具有一定的借鑒價值，需要的的可以參考一下2023-02-02
vue elementUI實現(xiàn)自定義正則規(guī)則驗證
本文主要介紹了vue elementUI實現(xiàn)自定義正則規(guī)則驗證，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本文主要介紹了el-form中的rules未生效的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要為大家詳細(xì)介紹了Vue仿百度搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家詳細(xì)介紹了vue循環(huán)數(shù)組改變點擊文字的顏色，非常實用的切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
本篇文章主要介紹了Vue 換膚的示例實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vue?Property?Decorator提供了一些裝飾器，包括@Prop、@Watch、@Emit、@Inject、@Provide、@Model等等，本文主要來和大家講講它們的使用方法，需要的可以參考一下2023-07-07