我就廢話(huà)不多說(shuō)了，大家還是直接看代碼吧~

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);

}

}

};

如果本篇文章對(duì)你有幫助的話(huà)，很高興能夠幫助上你。

補(bǔ)充知識(shí)：vue iview上傳多文件只發(fā)送一次ajax請(qǐng)求，并根據(jù)上傳進(jìn)度顯示上傳進(jìn)度條

前言

基于iview的上傳組件(Upload)以及進(jìn)度條組件(Progress)

思路

使用Upload組件提供的上傳文件之前的鉤子，將所有上傳文件攔截下來(lái)，保存在本地臨時(shí)數(shù)組，使用axios來(lái)進(jìn)行上傳

完整示例

進(jìn)度條部分，請(qǐng)上傳一個(gè)大文件來(lái)查看效果

:before-upload="handleUpload"

:action="''"

:multiple="true"

>

請(qǐng)選擇附件

• v-for="(item, index) of formData.dispalyFile"

  :key="index"

  >

  {{ item.name }}

import axios from 'axios';

export default {

data() {

return {

formData: {

dispalyFile: [] // 臨時(shí)數(shù)組，同時(shí)用于顯示在頁(yè)面

},

// 上傳配置

upload: {

look: true, // 控制多文件上傳，只觸發(fā)一次ajax請(qǐng)求

fileProgressShow: false, // 進(jìn)度條

fileProgress: 0 // 進(jìn)度條進(jìn)度

}

};

},

methods: {

handleUpload(selectFile) {

// 臨時(shí)數(shù)組，同時(shí)用于顯示在頁(yè)面

this.formData.dispalyFile.push(selectFile)

// 控制多文件上傳，只觸發(fā)一次ajax請(qǐng)求

if (this.upload.look) {

this.upload.look = false;

// 延遲請(qǐng)求，等待所有文件都從本地讀取完畢

setTimeout(() => {

let formData = new FormData();

this.formData.dispalyFile.map(item => {

// files為后臺(tái)接收參數(shù)

// []為多文件數(shù)組

formData.append('files[]', item);

})

axios.request({

url: '/upload',

method: 'post',

data: formData,

headers: { 'Content-Type': 'multipart/form-data' },

onUploadProgress: (progressEvent) => {

// 用于上傳過(guò)程中顯示進(jìn)度條

if (progressEvent.lengthComputable) {

// 顯示進(jìn)度條

this.upload.fileProgressShow = true;

// 計(jì)算當(dāng)前進(jìn)度

let curValue = (progressEvent.loaded / progressEvent.total * 100).toFixed(0);

// 賦值給進(jìn)度條組件

this.upload.fileProgress = parseInt(curValue);

}

}

})

.then(res => {

// 上傳成功處理

// 隱藏進(jìn)度條

this.upload.fileProgressShow = false;

})

.catch(() => {

// 上傳失敗處理

// 隱藏進(jìn)度條

this.upload.fileProgressShow = false;

})

}, 50);

}

return false;

}

}

};

.upload {

width: 40%;

}

效果圖

上傳多文件，只進(jìn)行了一次ajax請(qǐng)求，這里xlz是一個(gè)超大壓縮包，用于展示進(jìn)度條效果， binary 為二進(jìn)制文件

如果本篇文章對(duì)你有幫助的話(huà)，很高興能夠幫助上你。希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的vue 拷贝 数组_vue 使用lodash实现对象数组深拷贝操作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。