当前位置：网站首页 > 技术文章 > 正文

Vue 2深入 keep-alive_vue中keepalive

myzbx 2025-09-18 04:59 21 浏览

keep-alive 是 Vue 2 运行时里最常被提及却最少被深究的内置组件。它看上去只是“把页面缓存起来”，背后却涉及实例生命周期劫持、LRU 缓存策略、VNode 复用以及内存管理。

一、设计动机

单页应用里常见的“标签页”“面包屑”“分步表单”等交互模式，都要求用户在多个路由或状态之间来回切换。默认情况下，每一次切换都会触发旧组件的 $destroy，再执行新组件的完整挂载链路：

如果页面重、接口多，这种“拆房再建房”的代价极高，而且无法保留滚动位置、表单草稿等瞬态状态。

keep-alive 通过缓存组件实例（而非仅缓存 DOM）解决了两个问题：

时间成本：跳过创建与销毁，直接复用已有实例；
状态保留：实例存活，内部 state、DOM 引用、定时器全部保持原状。

二、组件级缓存的三要素

keep-alive 在 created 钩子里初始化两个核心字段：

缓存池是一个键到 VNode 的映射，键的生成规则如下：

若组件在路由或 key prop 中显式声明，则直接使用；
否则使用 cid + "::" + tag 自动生成，确保全局唯一。

keys 数组用来维护 LRU 顺序：最近一次被命中的键总是被移动到数组末尾，最久未使用的键位于头部，当缓存数量超过 max 时直接 shift 掉。

三、渲染函数：命中、失活、淘汰的决策点

keep-alive 没有模板，它的逻辑全部写在 render：

关键点拆解：

复用实例：直接复用 componentInstance，包括内部状态、DOM 引用、事件监听。
阻止销毁：子组件在 destroy 阶段会检查 vnode.data.keepAlive，为真则跳过 $destroy，仅执行 deactivated。
LRU 淘汰：pruneCacheEntry 会手动调用 $destroy 并移除 DOM，确保内存不会无限膨胀。

四、生命周期劫持：activated 与 deactivated

被 keep-alive 包裹的组件新增两条专用钩子：

activated：组件从缓存池取出并插入 DOM 后触发；首次挂载在 mounted 之后立即执行一次。
deactivated：组件从 DOM 移除但实例存活时触发，此时 DOM 已卸载，定时器、事件监听仍可运行。

常见用法：

五、缓存命中时的完整调用链

用户从路由 A 切换到路由 B，再回退到 A：

路由 A 的组件失活 → deactivated
路由 B 挂载 → 正常生命周期
回退到 A → keep-alive 发现 key 命中
取出旧实例 → activated → DOM 重新插入 → 页面瞬间恢复

整个过程无 beforeCreate / created / mounted，也无 DOM 重建，仅有 CSS 动画或滚动恢复逻辑。

六、内存与边界注意事项

max 必须设置：未设置时缓存无限增长，切页面多会撑爆内存。
避免缓存庞大状态：缓存的是实例 + DOM 树，包含所有闭包变量；大数据列表或第三方图表应手动 deactivated 中销毁。
keep-alive 不能缓存异步组件本身，只能缓存异步组件解析后的真实组件实例；若需缓存加载态，把 <Suspense> 与 keep-alive 组合使用。
include / exclude 支持正则与函数，可基于路由 meta 动态调整缓存策略，实现“登录页不缓存，业务页缓存”。

七、代码实例

切换路由或条件渲染时，<comp-a> 和 <comp-b> 的实例被缓存；max 限制为 10，超出后最早访问的组件会被销毁。

DOM 事件监听程序

上一篇：谈谈React 19的“事件钩子”useEvent，如何简化你的组件逻辑
下一篇：vue项目启动执行顺序_vue项目执行流程

Vue 2深入 keep-alive_vue中keepalive

一、设计动机

二、组件级缓存的三要素

三、渲染函数：命中、失活、淘汰的决策点

四、生命周期劫持：activated 与 deactivated

五、缓存命中时的完整调用链

六、内存与边界注意事项

七、代码实例

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿