vue-router多个router-view导致组件重复渲染的问题

发表于 2019-05-29  499 次阅读


文章目录

踩坑

由于业务上需要,需要在标签切换的时候对组件的保持状态。所以用到keep-alive对动态组件进行缓存。这样切换标签时,除了第一次会创建组件外,下次不会再次创建。但是测试小姐姐却提了一个bug,说切换标签时数据没有进行保持。

分析

在debugger的过程中,发现切换标签的时候,组件的created生命周期函数又重新执行了一次,嗯,因为我们的数据获取是在created钩子获取的,所以我首先是检查这个地方。这就触及了我知识盲区了,因为明明用了keep-alive,组件却没有被缓存。请教了同事,也想不出是什么原因会导致组件被再次创建。由于组件中mixin进了其它生命周期钩子逻辑,我们曾一度怀疑是mixin惹得锅。有了怀疑对象,就要排除是不是因为它导致的问题。这里用控制变量法验证,去掉mixin的逻辑,看会不会重复渲染组件。事实证明不是mixin的锅。排除了mixin的问题后,我们陷入困境,无从下手。这时,我们只好重新检查使用keep-alive的代码:

See the Pen
eaLLBg
by chwech (@chwech)
on CodePen.

公司代码不方便贴出,还原回来,逻辑就如上面的一样。看完以后觉得没有任何问题啊。再看,感觉有点怪?此处使用了v-for循环了多个router-view! 按经验一般应该只有一个路由出口,会不会是多个路由出口导致的重复渲染?ok, 又有了怀疑的对象,还是按照套路,试试一个路由出口,再也没有重复渲染的问题。

总结

此bug非常隐蔽,找bug的过程也比较low, 都是猜测中排查,所以在此记录一下,以免下次犯同样的错误。

本站文章基于国际协议BY-NA-SA 4.0协议共享;
如未特殊说明,本站文章皆为原创文章,请规范转载。

0

眼前解决不了的问题, 都可交付未来, 时间是一个伟大的作者, 他必将写出, 最完美的答案。