vue 使用lodash如何實現對象數組的深拷貝？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
<template>
<div></div>
</template>
<script>
export default {
mounted() {
this.init();
},
methods: {
init() {
let lodash = require('lodash');
let obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3],
h: () => {
return 123;
},
k: undefined
};
let obj2 = lodash.cloneDeep(obj1);
obj2.b.f.g = 2;
obj2.c = [1, 2];
obj2.h = 1;
console.log(obj1);
console.log(obj2);
}
}
};
</script>
如果本篇文章對你有幫助的話，很高興能夠幫助上你。
補充知識：vue iview上傳多文件只發送一次ajax請求，并根據上傳進度顯示上傳進度條
前言
基于iview的上傳組件（Upload）以及進度條組件（Progress）
思路
使用Upload組件提供的上傳文件之前的鉤子，將所有上傳文件攔截下來，保存在本地臨時數組，使用axios來進行上傳
完整示例
進度條部分，請上傳一個大文件來查看效果
<template>
<Form :model="formData" :label-width="80">
<FormItem class="upload" label="上傳文件">
<Upload
:before-upload="handleUpload"
:action="''"
:multiple="true"
>
<Button icon="ios-cloud-upload-outline">請選擇附件</Button>
</Upload>
<!-- 進度條 -->
<Progress v-if="upload.fileProgressShow" :percent="upload.fileProgress" />
<!-- 顯示列表 -->
<ul>
<li
v-for="(item, index) of formData.dispalyFile"
:key="index"
>
<span>{{ item.name }}</span>
<Icon type="md-close" @click="handleRemove(index)" />
</li>
</ul>
</FormItem>
</Form>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
formData: {
dispalyFile: [] // 臨時數組，同時用于顯示在頁面
},
// 上傳配置
upload: {
look: true, // 控制多文件上傳，只觸發一次ajax請求
fileProgressShow: false, // 進度條
fileProgress: 0 // 進度條進度
}
};
},
methods: {
handleUpload(selectFile) {
// 臨時數組，同時用于顯示在頁面
this.formData.dispalyFile.push(selectFile)
// 控制多文件上傳，只觸發一次ajax請求
if (this.upload.look) {
this.upload.look = false;
// 延遲請求，等待所有文件都從本地讀取完畢
setTimeout(() => {
let formData = new FormData();
this.formData.dispalyFile.map(item => {
// files為后臺接收參數
// []為多文件數組
formData.append('files[]', item);
})
axios.request({
url: '/upload',
method: 'post',
data: formData,
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: (progressEvent) => {
// 用于上傳過程中顯示進度條
if (progressEvent.lengthComputable) {
// 顯示進度條
this.upload.fileProgressShow = true;
// 計算當前進度
let curValue = (progressEvent.loaded / progressEvent.total * 100).toFixed(0);
// 賦值給進度條組件
this.upload.fileProgress = parseInt(curValue);
}
}
})
.then(res => {
// 上傳成功處理
// 隱藏進度條
this.upload.fileProgressShow = false;
})
.catch(() => {
// 上傳失敗處理
// 隱藏進度條
this.upload.fileProgressShow = false;
})
}, 50);
}
return false;
}
}
};
</script>
<style scoped>
.upload {
width: 40%;
}
</style>效果圖
上傳多文件，只進行了一次ajax請求，這里xlz是一個超大壓縮包，用于展示進度條效果， binary 為二進制文件
看完上述內容，你們掌握vue 使用lodash如何實現對象數組的深拷貝的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
