keep-alive 提供缓存机制，onActivated/onDeactivated 负责唤醒与休眠；二者仅在 keep-alive 包裹下生效，onActivated 在挂载后及每次激活时触发，onDeactivated 在进入缓存时触发。
在 Vue 3 中，keep-alive 不是自动激活组件的开关，而是提供缓存机制；真正负责“唤醒”和“休眠”逻辑的是 onActivated 和 onDeactivated 这两个专属钩子。它们必须配合 <keep-alive> 才会生效，单独使用不会触发。
onActivated 和 onDeactivated 的作用时机
这两个钩子只在被 <keep-alive> 包裹的组件中运行：
- onActivated：组件首次挂载完成时触发一次；之后每次从缓存中重新显示（比如 Tab 切换回来、路由返回）都会再次触发
- onDeactivated：组件被隐藏且进入缓存状态时触发（不是销毁，只是暂停）；比如切换到另一个 Tab 或页面时
组合式 API 中的正确写法
在 setup() 或 <script setup> 中，需显式引入并使用：
- 用
import { onActivated, onDeactivated } from 'vue' - 在
setup内部直接调用，无需 return，也不依赖 this - 它们与
onMounted等一样属于声明式生命周期注册，不是事件监听器
示例：
立即学习“前端免费学习笔记（深入）”；
<script setup>import { onActivated, onDeactivated, ref } from 'vue'
const count = ref(0)
const timer = ref(null)
onActivated(() => {
console.log('组件醒了')
if (!timer.value) {
timer.value = setInterval(() => count.value++, 1000)
}
)
onDeactivated(() => {
console.log('组件睡了')
clearInterval(timer.value)
timer.value = null
)
</script>
常见误区与注意事项
- 组件必须有明确的
name选项，否则include/exclude配置可能失效 -
onActivated不会在组件首次渲染前触发，它总在onMounted之后执行（首次加载完整顺序：onBeforeMount → onMounted → onActivated） - 父子组件都会触发自己的
onActivated，但父组件先于子组件激活 - 如果组件被
exclude排除或超出max缓存数量，就不会走缓存流程，也就不会触发这两个钩子
典型应用场景
- 恢复滚动位置（比如列表页返回时回到上次浏览位置）
- 重启定时器、轮询请求或 WebSocket 心跳
- 重新订阅事件或启动动画
- 清理副作用（在
onDeactivated中做），避免内存泄漏
