直接用 keep-alive 包裹表单组件即可保留输入、滚动、校验及计算结果；适合缓存步骤多、依赖实时校验、返回频率高或含复杂交互的表单页，并通过 :include/:exclude/:max 及 activated/deactivated 精准控制。
直接用 keep-alive 包裹表单组件，就能让页面切换后保留所有输入、滚动位置、校验状态和本地计算结果，不用手动存取 localStorage 或反复请求接口。
哪些表单页适合加 keep-alive
不是所有表单都需要缓存。重点缓存那些：
- 填写步骤多、耗时长（如注册页、订单确认页、后台配置向导）
- 依赖用户多次修改+实时校验（如带动态字段增删的表单）
- 返回频率高且数据未提交（如从详情页返回编辑页、Tab 间来回切）
- 含大量下拉联动、异步搜索或富文本内容
基础写法：路由场景下最常用
在布局组件（如 App.vue 或 Layout.vue）中包裹
<template>
<keep-alive :include="['FormPage', 'StepTwo', 'UserProfileEdit']">
<router-view />
</keep-alive>
</template>
:include 显式声明要缓存的组件名，避免把详情页、登录页等轻量或敏感页也缓存进去。
立即学习“前端免费学习笔记（深入）”；
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
配合 activated/deactivated 做精准控制
表单常需“进页面刷新数据”但“不重置已填内容”。这时不要在 mounted 里拉数据，改用：
- activated：只在从缓存恢复时触发，适合更新时间戳、重新检查权限、轮询未完成上传
- deactivated：适合清理定时器、暂停视频播放、保存草稿到内存（非必须存 localStorage）
例如：
export default {
activated() {
// 仅当用户切回来时，检查是否有新版本配置需要提示
this.checkConfigUpdate()
},
deactivated() {
// 清掉防抖搜索的 pending 请求，避免返回后意外触发
if (this.searchTimer) clearTimeout(this.searchTimer)
}
}
避免缓存副作用的实用技巧
缓存太“忠心”反而容易出问题，比如：
- 用户换账号后，旧表单仍显示前一个用户的姓名——用 exclude 排除登录态强相关的页面
- 列表页带筛选条件跳转进来，表单里却还留着上次的默认值——在 activated 中根据路由参数判断是否需重置部分字段
- 缓存太多导致内存增长——加 :max="5" 限制总数，优先保核心流程页
示例：
<keep-alive :include="formPages" :exclude="['LoginPage', 'ResetPassword']" :max="6"> <router-view /> </keep-alive>
不复杂但容易忽略
keep-alive 不是黑盒魔法，它只是把组件实例留在内存里。只要组件本身没在 beforeUnmount 或 deactivated 中主动清空 data，所有状态就自然保留。不需要额外写缓存逻辑，也不用担心响应式失效。
