vue3引用类型和基础类型深度克隆

深度克隆失效的一个例子

javascript 复制代码
import { cloneDeep } from "lodash";
import { ref } from "vue";

const navArr = ref([
    "recommend",
    "hot",
    "new",
])
const list1: any = ref([])
const list2: any = ref([])
const list3: any = ref([])

for (let index = 0; index < navArr.value.length; index++) {
    const ele = navArr.value[index];
    list1.value[ele] = {
        list: [],
        currentIndex: 0,
        pageObj: {
            navActive: ele,
            page: 1,
            size: 4,
        }
    }
}

console.log("list1", list1.value);

list2.value = cloneDeep(list1.value)

console.log("list2", list2.value);

list3.value = JSON.parse(JSON.stringify(list1.value))

console.log("list3", list3.value);

原因是list1和list2初始值用中括号[],但是navArr遍历的时候是对象的方式赋值,

虽然不影响list1赋值,但是类型错了,导致深度克隆会失败,

改成 花括号 对象方式初始值

修改后

相关推荐
TT模板3 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩4 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真9 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom1 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
凉豆菌1 小时前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html
广西千灵通网络科技有限公司1 小时前
基于 springboot+vue+elementui 的办公自动化系统设计(
vue.js·spring boot·elementui
鬼面瓷2 小时前
CAPL编程_03
前端·数据库·笔记