onDeactivated仅在组件被keep-alive包裹、未被exclude且实际失活时触发；需在中导入使用，常与onActivated配合保存/恢复状态。

在 Vue 3 中，onDeactivated 钩子只会在组件被 包裹、且**从当前视图中切换离开（即失活）时触发**。它不会在普通路由跳转或组件销毁时自动执行，前提是组件必须处于缓存状态。

确保 onDeactivated 被触发的必要条件

以下三点缺一不可：

• 组件必须被 包裹 —— 直接写在模板里，或通过 方式启用缓存
• 该组件不能在 exclude 列表中 —— 如果用了 ，那这个组件根本不会被缓存，也就不会触发 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>&nbsp;&nbsp;import { onDeactivated } from '<a style="color:#f60; text-decoration:underline;" title= "vue"href="https://m.php.cn/zt/15721.html" target="_blank">vue'<br><br>&nbsp;&nbsp;onDeactivated(() => {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log('&#32452;&#20214;&#24050;&#22833;&#27963;&#65292;&#36827;&#20837;&#32531;&#23384;')<br>&nbsp;&nbsp;&nbsp;&nbsp;// &#21487;&#22312;&#27492;&#26242;&#20572;&#23450;&#26102;&#22120;&#12289;&#21462;&#28040;&#26410;&#23436;&#25104;&#35831;&#27714;&#12289;&#20445;&#23384;&#28378;&#21160;&#20301;&#32622;&#31561;<br>&nbsp;&nbsp;})<br></script>

常见不触发的原因和排查点

• 组件名没对上：include 或 exclude 里写的名称必须与组件 name 选项或 defineOptions({ name: 'MyComponent' }) 一致
• 用的是 setup() 函数式写法但没在返回对象中注册钩子 —— <script setup></script> 是更稳妥的选择
• 组件是异步加载的（defineAsyncComponent），但没显式设置 name，导致 keep-alive 无法识别
• 父级没有启用 ，比如只写了 而没套一层缓存容器

配合 onActivated 做状态联动

onDeactivated 和 onActivated 是成对出现的。例如保存搜索关键词和恢复列表位置：

• 失活时：记录 scrollTop、清空临时编辑状态、暂停轮询
• 激活时：滚动回原位置、重新拉取最新数据（如果需要）、重启定时器

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