onDeactivated仅在组件被缓存且失活时触发，需显式声明name选项（如defineOptions({name:'UserProfile'})），用于清理定时器、暂停媒体等；未缓存时触发onUnmounted而非此钩子。
用 onDeactivated 监听组件失活
在 Vue 3 组合式 API 中，onDeactivated 是专为 <keepalive></keepalive> 场景设计的生命周期钩子，用于响应组件被缓存（即离开当前视图但未销毁）的时刻。它只在组件被 <keepalive></keepalive> 包裹、且路由或条件切换导致其“停用”时触发。
确保组件能被正确识别和缓存
<keepalive></keepalive> 依赖组件的 name 选项 进行匹配与实例复用。若未显式声明，即使用了 onDeactivated，钩子也不会执行。
- 在
<script setup></script>中，需调用defineOptions({ name: 'YourComponentName' }) - name 必须是合法的字符串（如
'UserProfile'），不能是变量或动态值 - 若使用
include或exclude属性控制缓存范围，name 必须与配置项完全匹配
在 setup 中注册并使用 onDeactivated
直接在 setup() 函数内导入并调用，无需额外条件判断：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 导入：
import { onDeactivated } from 'vue' - 注册：
onDeactivated(() => { /* 执行清理、暂停定时器、取消请求等 */ }) - 常见用途：清除轮询定时器、暂停视频播放、解绑非响应式事件监听器、保存临时草稿到 localStorage
注意与其他生命周期的配合关系
onDeactivated 不会替代 onUnmounted，二者触发条件不同：
立即学习“前端免费学习笔记（深入）”；
- 组件被
<keepalive></keepalive>缓存 → 触发onDeactivated，不触发onUnmounted - 组件未被缓存（如配置了
exclude或未设name）→ 直接卸载，触发onUnmounted，不触发onDeactivated - 若需统一清理逻辑，可将共用代码抽离为函数，在两个钩子中分别调用
