深度克隆失效的一个例子
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赋值，但是类型错了，导致深度克隆会失败，
改成 花括号 对象方式初始值
修改后文章来源：https://www.toymoban.com/news/detail-781008.html
文章来源地址https://www.toymoban.com/news/detail-781008.html
到了这里，关于vue3引用类型和基础类型深度克隆的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
