Vue 3 中动态组件的 keep-alive 缓存失效问题与解决方案
在一个后台管理系统中,我们经常用 <component :is="currentTab"> 配合 <keep-alive> 来缓存不同标签页的组件状态。但最近遇到一个奇怪的现象:当用户切换标签时,部分组件的滚动位置和表单输入没有被保留,而另一些却正常。排查后发现,问题出在动态组件的 key 和 include 属性上——当组件通过 defineAsyncComponent 异步加载时,keep-alive 的缓存机制会因为组件名匹配失败而跳过缓存。此外,如果动态组件外层包裹了 transition 或 KeepAlive 的 max 属性设置不当,也会导致缓存被意外剔除。这篇文章会从 Vue ...