onDeactivated是Vue 3中专为keep-alive设计的钩子，组件被缓存（DOM移除但未卸载）时触发，用于清除定时器、取消请求、暂停WebSocket等；需与onActivated配合形成暂停-恢复闭环，并确保组件确被keep-alive包裹。
在 Vue 3 中，onDeactivated 是专为 <keep-alive> 场景设计的组合式生命周期钩子，它只在组件被缓存（即从 DOM 移除但未卸载）时触发。它不是“组件销毁前”的钩子，而是“进入缓存态”的明确信号。
onDeactivated 的触发时机和本质
当一个被 <keep-alive> 包裹的组件因路由跳转、Tab 切换或动态组件切换而**从视图中隐藏**，但实例仍保留在内存中时，onDeactivated 就会执行。此时：
- 组件的 DOM 已从页面移除，但响应式数据、计算属性、ref 等全部保留
-
onUnmounted不会触发 —— 因为组件并未真正卸载 - 下次再回到该组件时，会走
onActivated，而不是重新onMounted
典型使用场景和操作建议
这个钩子的核心价值是“暂停当前活跃行为”，为后续恢复做准备。常见做法包括：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
-
清除定时器：比如
setInterval或setTimeout，避免在后台持续运行消耗资源 -
取消未完成的请求：用
AbortController主动中断fetch或 Axios 请求 -
暂停 WebSocket 或事件监听：如
removeEventListener或调用ws.close() - 释放非必要引用：比如清空大型临时数组、断开第三方 SDK 的回调绑定
与 onActivated 配合使用的逻辑闭环
onDeactivated 和 onActivated 天然成对，构成“暂停–恢复”闭环。例如：
立即学习“前端免费学习笔记（深入）”；
- 在
onActivated中启动轮询定时器、重新订阅消息、拉取最新列表数据 - 在
onDeactivated中清除该定时器、退订消息、忽略过期响应 - 若组件有编辑状态（如表单草稿），可在
onDeactivated中保存到localStorage，在onActivated中读取恢复
注意事项和易错点
实际使用中需特别注意：
- 确保组件确实被
<keep-alive>包裹，否则onDeactivated完全不会执行 - 不要在
onDeactivated中调用router.push或触发导航，可能引发竞态或白屏 - 避免在其中执行异步等待（如
await）后才清理资源——钩子本身不等待 Promise，清理应同步完成 - 如果用了
include/exclude属性，确认当前组件名匹配规则，否则缓存失效，钩子也不会触发
