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