onActivated 和 onDeactivated 是组合式 API 中用于处理 keep-alive 缓存组件激活与停用的专属钩子，必须在 setup 内调用；前者在组件重新显示时执行恢复操作，后者在组件进入缓存前执行清理工作，仅对被 keep-alive 包裹的命名组件生效。
Vue 组合式 API 中，keep-alive 缓存组件的激活与停用逻辑通过 onActivated 和 onDeactivated 两个专属钩子处理，它们替代了选项式 API 中的 activated 和 deactivated 方法，且必须在 setup() 或 setup 函数内部调用。
onActivated：组件从缓存中“醒来”时执行
每当被 <keep-alive></keep-alive> 包裹的组件重新显示（比如路由切回、动态组件再次渲染），onActivated 就会触发。它适合做“恢复性操作”，例如：
- 重新拉取最新数据（尤其适用于列表页刷新、详情页更新）
- 恢复滚动位置（配合
ref或useScroll保存的偏移量） - 重启暂停的定时器或动画
- 重置局部 UI 状态（如搜索框输入、表单校验标记）
注意：它不会在首次挂载时重复执行 onMounted 的逻辑，所以初始化仍应保留在 onMounted 中；onActivated 只负责“再激活”行为。
onDeactivated：组件进入缓存前“休眠”时执行
当组件即将被隐藏但不销毁（即被 <keep-alive></keep-alive> 缓存），onDeactivated 会被调用。这是清理资源的关键时机：
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 清除定时器（
clearInterval/clearTimeout） - 移除手动绑定的事件监听器（如
window.addEventListener） - 暂停轮询或 WebSocket 心跳
- 暂存当前状态（如表单草稿、筛选条件）到
ref或localStorage
不清理会导致内存泄漏或逻辑错乱——因为组件实例仍在内存中，但已不可见。
使用注意事项
这两个钩子仅在组件被 <keep-alive></keep-alive> 包裹时生效，且必须在 setup 内部调用：
- 不能在
onBeforeUnmount或onUnmounted中替代onDeactivated—— 后者只在缓存时触发，前者只在真正销毁时触发 - 组件需显式声明
name（尤其在动态组件场景），否则keep-alive可能无法正确识别和缓存 - 若配合
router-view使用，推荐用<keep-alive :include="['Home', 'About']>精确控制缓存范围，避免无差别缓存
简单示例（Composition API）
相关文章 Vue 3 中 KeepAlive 怎么在组件激活时触发 onActivated 钩子 Vue 3 中请求取消怎么在组合式函数中封装可复用的取消逻辑 Vue 3 中生命周期钩子怎么使用 onMounted 初始化网络请求 Vue 3 中登录状态管理怎么在安全退出时清理所有缓存 Vue 3 中怎么用 watch 监听分页页码变化自动向后端发起翻页请求 本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
