Vue 3 中 <KeepAlive> 组件数据不刷新的根本原因是实例复用导致初始化钩子仅执行一次，应将数据获取逻辑移至 onActivated 钩子中；同时按需缓存、动态控制及手动清除可提升体验。
Vue 3 中使用 <KeepAlive> 后数据不刷新，根本原因是组件实例被复用，onMounted、onCreated 等初始化钩子只执行一次，后续激活不再触发。解决的关键在于把“获取最新数据”的逻辑，从初始化钩子迁移到 onActivated 钩子中。
用 onActivated 替代 mounted 获取数据
这是最直接、最常用的方式。只要组件被 <KeepAlive> 包裹，每次从缓存中激活（比如标签页切换回来、路由返回）时，onActivated 就会执行。
- ❌ 错误写法：只在
onMounted里请求数据，第二次进入不会刷新 - ✅ 正确写法：把请求函数单独抽离，在
onMounted和onActivated中都调用
示例：
import { ref, onMounted, onActivated } from 'vue'
const list = ref([])
const loadData = () => {
fetch('/api/list').then(r => r.json()).then(data => list.value = data)
}
onMounted(loadData)
onActivated(loadData) // 每次切回来都刷新
按需缓存，避免无差别包裹
不是所有页面都需要缓存。比如详情页、表单提交页，用户每次进入都应是全新状态；而列表页、仪表盘更适合缓存。
立即学习“前端免费学习笔记（深入）”；
- 用
include或exclude属性精准控制缓存范围，例如：<KeepAlive :include="['ListPage', 'Dashboard']"><RouterView /></KeepAlive> - 配合路由
meta字段动态判断：在路由配置中设置meta: { keepAlive: true }，再在<RouterView>外层做条件渲染
需要强刷新时手动清除缓存
某些操作后（如提交成功、管理员强制同步），希望组件彻底重新加载，可以临时“踢出”缓存。
- 给组件设置唯一
key，比如:key="$route.fullPath"或:key="timestamp"，修改 key 值即可触发重建 - 在 Vue Router 的
beforeEach或组件内，通过响应式变量控制<KeepAlive>的显隐（例如用v-if控制是否启用缓存）
区分“状态保留”和“数据刷新”的需求
用户常混淆两个目标：保持滚动位置、表单草稿（要缓存），同时更新列表数据（要刷新）。这两者并不矛盾。
- 滚动位置、输入框内容等 DOM 状态由
<KeepAlive>自动维持 - 接口数据、时间戳、统计数等业务数据，应在
onActivated中主动拉取新值 - 必要时可加防抖或条件刷新，比如仅当距上次请求超过 30 秒才重载
