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）
import { onActivated, onDeactivated, ref } from 'vue'
<p>export default {
name: 'UserProfile',
setup() {
const scrollPos = ref(0)</p><pre class="brush:php;toolbar:false;">onActivated(() => {
window.scrollTo(0, scrollPos.value)
// 可选：触发一次用户信息刷新
fetchUserInfo()
})
onDeactivated(() => {
scrollPos.value = window.scrollY
// 清理可能存在的轮询
clearInterval(pollTimer)
})
return { /* ... */ } }
} 前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
