vue.js响应式系统不主动清理缓存，而是通过依赖追踪自动失效computed缓存；keepalive通过include/exclude、max（lru策略）及activated/deactivated钩子精准控制组件缓存生命周期。
Vue.js 的响应式系统本身不主动“清理缓存”，而是通过依赖追踪和脏检查机制，让缓存（如 computed、KeepAlive 组件、渲染结果）在需要时自动失效或复用。所谓“清理”，本质是控制缓存的生命周期、强制跳过复用、或重置状态，而非抹除内存中的所有缓存痕迹。
computed 缓存的自动失效与手动干预
computed 属性默认缓存其返回值，仅当依赖的响应式数据变化时才重新求值。这个过程由 dirty 标志位 控制：依赖变更 → setter 触发 → Watcher 标记 dirty = true → 下次访问时重新计算并更新缓存值。
- 无需手动清理，只要依赖数据正确响应式，缓存会自然失效
- 若依赖项是非响应式（如普通对象字面量、未 reactive 包裹的 props），computed 不会追踪，导致缓存“滞留”——此时应确保依赖项已纳入响应式系统
- 极少数场景需绕过缓存（如调试或强制刷新），可用
watchEffect+triggerRef或封装带 key 的 computed 实现可控刷新
KeepAlive 组件缓存的精准控制
<keepalive></keepalive> 是 Vue 3 中管理组件实例缓存的核心机制，它保留组件状态（data、DOM、生命周期）但暂停激活状态。缓存清理不是“删除”，而是“剔除”或“跳过复用”。
- 用
:include/:exclude白名单或黑名单控制哪些组件参与缓存 - 设置
:max限制缓存数量，超出时按 LRU（最近最少使用）策略自动卸载最久未激活的实例 - 配合
onActivated/onDeactivated在组件激活/失活时执行清理逻辑（如清空局部表单、重置定时器） - 动态修改
include数组或绑定的 key 值，可主动触发缓存替换（例如：<keepalive :key="route.fullPath"></keepalive>）
响应式数据变更后避免残留状态
响应式更新本身不会清除组件内部的非响应式状态（如闭包变量、定时器、第三方库实例）。这些“伪缓存”容易被误认为是 Vue 缓存问题。
- 在
onBeforeUnmount或onDeactivated中手动清理副作用：清除setTimeout、addEventListener、取消 axios 请求、销毁 ECharts 实例等 - 对复杂表单或编辑器状态，建议将关键字段设为响应式（
ref/reactive），而非仅靠本地变量维护 - 若组件被 KeepAlive 缓存，
onUnmounted不会触发，必须改用onDeactivated执行释放逻辑
构建与部署阶段的静态资源缓存破除
浏览器对 JS/CSS/HTML 的强缓存，常被误认为是 Vue 响应式缓存问题。这类缓存需在构建或服务端层面解决，与运行时响应式无关。
- 打包时启用内容哈希（如
filename: "[name].[contenthash].js"），确保文件内容变则 URL 变 - 服务端配置
Cache-Control: no-cache, must-revalidate对 HTML 文件，保证每次加载最新入口 - 结合版本号检测（如读取 public/version.json）+
router.beforeEach判断是否需强制刷新，适用于灰度发布或热修复场景
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
