复杂工作流页需用keepalive保状态，重点缓存跨步骤跳转、强联动、中途返回及高成本交互页面；须设组件name，配合activated/deactivated控制数据刷新与副作用清理，并用exclude、max等防污染。

在复杂工作流页面（比如多步骤表单、审批流程、向导式配置）中，用 KeepAlive 保存用户进度，核心是让组件实例不销毁、状态不重置——输入内容、滚动位置、校验结果、动态增删的字段、甚至未完成的异步请求上下文都能原样保留。

哪些工作流页必须加 KeepAlive

不是所有页面都需要缓存。重点覆盖这几类：

• 跨步骤跳转频繁的页面（如 Step1 → Step2 → 查看说明页 → 返回 Step2）
• 单页内含大量联动逻辑（下拉选 A 触发 B 加载，B 又影响 C 的显隐）
• 用户可能中途离开再返回，且未提交（例如从「订单确认」跳去「收货地址管理」，改完地址再回来）
• 富文本编辑、文件上传中、地图标记等高成本交互状态

路由场景下的标准写法

在布局组件（如 Layout.vue 或 App.vue）中包裹 <router-view></router-view>，并用 :include 显式声明要缓存的页面名：

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

注意：每个被缓存的组件必须定义 name 选项（如 export default { name: 'ApplyForm' }），否则 include 无法匹配。

用 activated/deactivated 控制关键行为

缓存不是“一包了事”，需要配合生命周期钩子做精准干预：

• 进页面时刷新数据但不丢填写：把接口请求从 mounted 移到 activated，避免每次切回来都重拉全量数据；已填字段保持不变
• 出页面时清理副作用：在 deactivated 中清除定时器、取消未完成的防抖搜索、暂停视频/音频播放
• 区分新进入 vs 缓存恢复：比如用户从列表页带参数跳转进来，首次需初始化字段；再次返回则跳过初始化，直接复用已有值

避免缓存污染的实用技巧

缓存太“老实”反而引发问题，几个常见解法：

• 登录态强相关页面（如个人中心、账户设置）加到 exclude，防止换账号后显示旧用户信息
• 同一组件用于不同业务（如「编辑页」复用「新增页」），通过路由参数或 store 状态判断是否清空部分字段
• 限制缓存总数，防止内存堆积：<keep-alive :max="5"></keep-alive>，优先保主流程页，自动淘汰最久未用的
• 手动清理某页缓存：调用 router.replace({ name: 'xxx', query: { t: Date.now() } }) 强制刷新，或结合 include/exclude 动态更新数组

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！