监听routes带来的隐患
项目上线后页面切换卡死,但是并没有任何的报错提示。排查到问题后进行解决。
警告warn Invalid watch source: A watch source can only be a getter/effect function, a ref, a reactive object 原先代码
watch(
route.matched,
(newVal) => {
routes.value = cloneDeep(route.matched);
console.log("newroutes.value");
filerPage();
},
{
immediate: true,
}
);
更新后的代码
watch(
() => route.matched,
(newVal) => {
routes.value = cloneDeep(route.matched);
console.log("newroutes.value");
filerPage();
},
{
immediate: true,
}
);
官方文档建议
route 对象是一个响应式对象，所以它的任何属性都可以被监听，但你应该避免监听整个 route 对象。在大多数情况下，你应该直接监听你期望改变的参数。
原先是监听整个route对象,cloneDeep是深度拷贝,改为监听路由某个属性即可。
watch(
() => route,
(newVal) => {
routes.value = cloneDeep(route.matched);
console.log("newroutes.value");
filerPage();
},
{
immediate: true,
}
);
更新后的代码
watch(
() => route.matched,
(newVal) => {
routes.value = cloneDeep(route.matched);
console.log("newroutes.value");
filerPage();
},
{
immediate: true,
}
);
