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

梦想与想象-广州大智汇2024-01-11 18:18

深度克隆失效的一个例子

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

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

修改后