keep-alive 组件中 watch 不失效但需确保监听响应式源：应直接 watch props/computed 或用函数形式，避免监听一次性局部变量；在 onActivated 中同步状态、清理副作用并考虑使用 watchEffect 自动追踪依赖。
在使用 keep-alive 缓存组件时，watch 不会因组件“隐藏”而自动停止，但也不会在缓存激活（activated）时自动重新建立监听 —— 它仍维持着初始创建时的响应式关系。问题本质不是 watch 失效，而是：组件被缓存后未重新执行 setup 或 data 初始化逻辑，导致依赖的响应式数据可能已过期、监听目标未更新、或副作用未按预期触发。
确保 watch 监听的是当前有效数据
常见错误是 watch 一个在 created/mounted 中一次性读取的局部变量，而非响应式源本身：
- ❌ 错误写法：在
onMounted中读取props.id赋值给普通 ref，再 watch 这个 ref —— 它不会随 props 更新而变化 - ✅ 正确做法：直接 watch
props或computed衍生状态，或使用watch(() => props.id, ...)函数形式监听响应式源 - 若监听的是 store 或全局状态，确认该状态本身是响应式的（如 Pinia 的
store.xxx，非解构后的普通变量）
在 activated 钩子中手动触发关键逻辑
keep-alive 组件被重新展示时，会触发 onActivated（Vue 3 Composition API）。这里适合做「状态同步」和「副作用恢复」：
- 调用一次核心 watch 回调中的关键逻辑（如刷新列表、校验权限、重设定时器）
- 检查并更新本地缓存数据是否与服务端/全局状态一致（例如对比
lastFetchTime） - 若 watch 依赖了异步获取的数据，可在
onActivated中判断是否需要重新请求
避免监听被缓存的无效引用
当组件内创建了闭包、定时器、事件监听器等副作用，它们可能持有对旧响应式对象的引用，导致 watch 回调执行时访问的是过期数据：
- 在
onDeactivated中清理副作用（清除定时器、移除事件监听、取消 pending 请求） - watch 回调中避免直接使用外部定义的非响应式变量；如需缓存中间值，用
ref或reactive管理 - 对复杂对象进行深度监听时，确认
deep: true且对象本身可被 Vue 追踪（避免用Object.assign({}, ...)破坏响应性）
用 watchEffect 替代 watch 做自动依赖追踪
如果监听逻辑依赖多个响应式源，或希望「组件激活时立即执行一次 + 响应变化」，watchEffect 更自然：
- 它会在首次运行时自动收集依赖，
activated后也会重新执行（只要依赖没变，就不会重复触发） - 配合
onActivated可实现「每次展示都刷新」：在onActivated中调用effect.run()（需先用const effect = watchEffect(...)显式创建） - 比手动管理 watch 的
immediate: true和条件重置更直观
