onDeactivated仅在组件被keep-alive包裹、未被exclude且实际失活时触发；需在中导入使用，常与onActivated配合保存/恢复状态。
在 Vue 3 中，onDeactivated 钩子只会在组件被 <keep-alive></keep-alive> 包裹、且**从当前视图中切换离开（即失活）时触发**。它不会在普通路由跳转或组件销毁时自动执行，前提是组件必须处于缓存状态。
确保 onDeactivated 被触发的必要条件
以下三点缺一不可：
-
组件必须被
<keep-alive></keep-alive>包裹 —— 直接写在模板里，或通过<router-view v-slot="{ Component }"><keep-alive><component :is="Component"></component></keep-alive></router-view>方式启用缓存 -
该组件不能在
exclude列表中 —— 如果用了<keep-alive exclude="MyComponent"></keep-alive>，那这个组件根本不会被缓存，也就不会触发onDeactivated -
组件需实际“失活”而非销毁 —— 比如从 A 页面（缓存中）跳到 B 页面（B 不在 keep-alive 中），此时 A 进入缓存，
onDeactivated立即执行；但如果 A 被v-if移除或父组件卸载，就不会走这个钩子
正确使用 onDeactivated 的方式
推荐在 <script setup></script> 中直接导入并调用：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
<script setup><br> import { onDeactivated } from 'vue'<br><br> onDeactivated(() => {<br> console.log('组件已失活，进入缓存')<br> // 可在此暂停定时器、取消未完成请求、保存滚动位置等<br> })<br></script>
立即学习“前端免费学习笔记（深入）”；
常见不触发的原因和排查点
- 组件名没对上：
include或exclude里写的名称必须与组件name选项或defineOptions({ name: 'MyComponent' })一致 - 用的是
setup()函数式写法但没在返回对象中注册钩子 ——<script setup></script>是更稳妥的选择 - 组件是异步加载的（
defineAsyncComponent），但没显式设置name，导致keep-alive无法识别 - 父级没有启用
<keep-alive></keep-alive>，比如只写了<router-view></router-view>而没套一层缓存容器
配合 onActivated 做状态联动
onDeactivated 和 onActivated 是成对出现的。例如保存搜索关键词和恢复列表位置：
- 失活时：记录
scrollTop、清空临时编辑状态、暂停轮询 - 激活时：滚动回原位置、重新拉取最新数据（如果需要）、重启定时器
