onDeactivated仅在组件被缓存且失活时触发，需显式声明name选项（如defineOptions({name:'UserProfile'})），用于清理定时器、暂停媒体等；未缓存时触发onUnmounted而非此钩子。

用 onDeactivated 监听组件失活

在 Vue 3 组合式 API 中，onDeactivated 是专为 场景设计的生命周期钩子，用于响应组件被缓存（即离开当前视图但未销毁）的时刻。它只在组件被 包裹、且路由或条件切换导致其“停用”时触发。

确保组件能被正确识别和缓存

依赖组件的 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，二者触发条件不同：

• 组件被 缓存 → 触发 onDeactivated，不触发 onUnmounted
• 组件未被缓存（如配置了 exclude 或未设 name）→ 直接卸载，触发 onUnmounted，不触发 onDeactivated
• 若需统一清理逻辑，可将共用代码抽离为函数，在两个钩子中分别调用

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