Vue 组件缓存如何配合组合式函数实现缓存状态的主动清理与重置

Vue组件缓存重置的核心是让被缓存组件主动感知并重置自身状态，而非简单清除keep-alive；通过provide/inject共享响应式状态与reset接口、组合式函数监听路由变化触发重置、动态控制keep-alive缓存范围、以及显式清理定时器/请求/本地存储等副作用来实现。

Vue 组件缓存配合组合式函数实现主动清理与重置，核心在于把缓存控制逻辑从模板和生命周期中抽离出来，封装成可复用、可触发、可测试的逻辑单元。关键不是“清掉 keep-alive”，而是“让被缓存的组件知道该重置自己”。

用 provide/inject + reactive 管理可重置状态

若组件内部状态由一个注入的响应式对象驱动（比如全局表单配置、筛选条件等），就不要直接修改属性，而应提供 reset 接口：

1. 在根组件或布局组件中 define 响应式状态，并通过 provide 注入：const globalState = reactive({ search: '', page: 1, filters: {} })
2. 封装 reset 函数，用 Object.assign 或 shallowRef 替换整个对象（避免响应式失效）：const resetState = () => Object.assign(globalState, { search: '', page: 1, filters: {} })
3. 子组件通过 inject 获取 state 和 resetState，需要时调用（如点击“重置筛选”按钮）

在组合式函数中监听路由变化并触发重置

利用 onBeforeRouteUpdate 或 watch 监听路由参数变化，自动决定是否重置缓存状态：

1. 在 setup 中使用 useRoute() 获取当前路由
2. watch route.params.id 或 route.query.tab，当切换到新业务上下文时调用 resetState()
3. 例如：从 /list?tab=orders 切到 /list?tab=products，可视为不同缓存域，需重置筛选条件

配合 keep-alive 实现按需缓存 + 按需激活重置

keep-alive 本身不提供清除 API，但可通过控制 include/exclude 或组件 key 触发重建 —— 这些操作都可在组合式函数中统一调度：

1. 定义一个 ref 缓存白名单：const cachedComponents = ref(['OrderList', 'ProductSearch'])
2. 封装 excludeComponent(name) 函数，从 cachedComponents 中移除组件名，下一次渲染即绕过缓存
3. 配合 <keep-alive :include="cachedComponents"> 使用，动态控制缓存范围
4. 也可在 activated 钩子中调用组合式函数的 refresh() 方法，实现“激活即更新”而非“激活即复用”

清理副作用：定时器、请求、本地存储同步

状态重置后，组件内遗留的副作用不会自动消失，必须显式清理：

1. 在组合式函数中维护一个定时器 ID 数组，reset 时 clearTimeout 并清空数组
2. 对正在 pending 的请求，保存 abortController.signal，在 reset 时调用 abortController.abort()
3. 若用了 pinia-plugin-persistedstate，reset 后调用 persist.clearStorage() 或仅清空对应 store 的 key
4. sessionStorage 或 localStorage 中的临时数据，也应在 resetState 中一并 removeItem