记录一下在做项目时出现的问题:
情况是这样,我做完路由动态添加时,控制台会就出现组件递归超出最大更新的问题
一开始我是怀疑是不是我在转换后端数据动态注册是那里有个递归的逻辑,代码修改了很多次都还是没有找到解决问题的点。就在昨晚疯狂百度的时候,看到几篇类似我问题的,发现他们的问题都说是在组件中的v-for 没有定义好key(唯一值) 或者 v-if(使用了函数)等影响到这个递归更新问题。感觉靠谱,我就立马去检查了自己的代码,发现只有在v-if中使用了一个函数,然后在这个函数里,在不同的逻辑中log,发现其中一个log一直在无限循环,最后把这个代码和问题去问AI,AI给出的问题点是因为我代码中使用了一个响应式的数据,一旦改变就会触发组件更新,建议我使用普通定义来接受数据,我修改后,终于好了!!部署到服务器也不会崩了。
let onlyOneChild: any; // 临时变量,唯一子路由
/**
* 判断当前路由是否只有一个子路由
*
* 1:如果只有一个子路由: 返回 true
* 2:如果无子路由 :返回 true
*
* @param children 子路由数组
* @param parent 当前路由
*/
function hasOneShowingChild(
children: RouteRecordRaw[] = [],
parent: RouteRecordRaw
) {
// 子路由集合
const showingChildren = children.filter((route: RouteRecordRaw) => {
if (route.meta?.hidden) {
// 过滤不显示的子路由
return false;
} else {
route.meta!.hidden = false;
// 临时变量(多个子路由 onlyOneChild 变量是用不上的)
onlyOneChild = route;
return true;
}
});
// 如果只有一个子路由, 返回 true
if (showingChildren.length === 1) {
return true;
}
// 如果没有子路由,显示父级路由
if (showingChildren.length === 0) {
onlyOneChild = { ...parent, path: "", noShowingChildren: true };
return true;
}
return false;
}
这是sidebarItem组件中我使用的方法,之前是const onlyOneChild = ref() //响应式
改成let onlyOneChild : any
问题即刻解决(我是新手,还在学习中...)