vue项目同一组件Tab切换复用不重新渲染的问题

9,264 阅读1分钟

出现问题:

在使用ant-tab组件切换时,发现:组件dom并不重新渲染;

原因分析:

tab切换使用的为同一组件,切换时tabKey已将变化,但是组件并不重新加载。

翻看官方文档:

Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外,还有其它一些好处。

所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的 key 属性即可

解决办法:

于是在组件中加入

:key="tabKey"

这样,再打开浏览器调试,发现,tab切换时出现问题的同一组件已经可以重新渲染了!

可见,key的重要性不言而喻,出现问题要多思考多总结!