ondeactivated是vue 3中专为keep-alive设计的钩子，组件被缓存（dom移除但未卸载）时触发，用于清除定时器、取消请求、暂停websocket等；需与onactivated配合形成暂停-恢复闭环，并确保组件确被keep-alive包裹。

在 Vue 3 中，onDeactivated 是专为 <keep-alive></keep-alive> 场景设计的组合式生命周期钩子，它只在组件被缓存（即从 DOM 移除但未卸载）时触发。它不是“组件销毁前”的钩子，而是“进入缓存态”的明确信号。

onDeactivated 的触发时机和本质

当一个被 <keep-alive></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></keep-alive> 包裹，否则 onDeactivated 完全不会执行
• 不要在 onDeactivated 中调用 router.push 或触发导航，可能引发竞态或白屏
• 避免在其中执行异步等待（如 await）后才清理资源——钩子本身不等待 Promise，清理应同步完成
• 如果用了 include/exclude 属性，确认当前组件名匹配规则，否则缓存失效，钩子也不会触发

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！