<KeepAlive> 缓存组件实例

最后更新：2026-10-22

缓存被包裹组件的实例：切换回来时保留状态、跳过重新渲染（常用于标签页、路由视图）。

📝 语法

<KeepAlive include="TabA,TabB" :max="10">
  <component :is="currentTab"></component>
</KeepAlive>

props	include / exclude（名称或正则）/ max（最多缓存数，超出淘汰最久未用）

修改下面的代码，在预览区实时查看效果：

输出：

在 A 标签输入文字后切到 B 再切回：内容仍在。

💡 提示 配合 activated / deactivated 钩子做“重新进入时刷新、离开时暂停”。

ℹ️ 说明 max 采用 LRU 淘汰：超出上限先销毁最久未访问的实例。

⚠️ 注意 缓存的是实例与状态（含定时器）：长期缓存不活跃页面会占用内存，用 max 设上限。

更多案例即将上线。

Q 和 v-show 的区别？

A v-show 隐藏但保留 DOM；KeepAlive 缓存整个组件实例（含状态与副作用）。

Q include 怎么写？

A 逗号分隔组件名或正则：:include="/Tab/"; 匹配的是组件的 name。

Q 缓存会一直保留吗？

A 默认不设上限；用 :max 控制，或用 include/exclude 白名单。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。