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赋值,但是类型错了,导致深度克隆会失败,

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

修改后

相关推荐
一颗松鼠几秒前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds21 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果39 分钟前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长44 分钟前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨1 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js