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

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

修改后

相关推荐
y先森14 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy14 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891117 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
天天进步20153 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js