onactivated 是 vue 3 中专用于 场景的组合式生命周期钩子，仅在组件被缓存后再次显示时触发，需满足被 包裹且已缓存两个前提；它不替代 onmounted，而是补充，适用于每次展示需刷新的逻辑（如重拉数据、重启定时器），并须与 ondeactivated 配对清理资源。
在 Vue 3 中，onActivated 是专为 <keep-alive></keep-alive> 场景设计的组合式生命周期钩子，它不替代 onMounted，而是补充——只在组件被缓存后**再次显示**时触发，且可重复执行。
onActivated 的触发条件必须满足两个前提
✅ 组件必须被 <keep-alive></keep-alive> 显式包裹（直接写或通过路由配置如 meta: { keepAlive: true }）
✅ 组件已处于缓存状态，且当前重新插入 DOM（例如：从 Tab B 切回 Tab A、路由 back、v-if 重变为 true）
⚠️ 若组件未被缓存，或首次挂载但尚未进入缓存流程，onActivated 不会执行；此时应依赖 onMounted 做一次性初始化。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
onActivated 里该做哪些事
核心原则：只处理“每次展示都需要刷新或重启”的逻辑，避免重复初始化已有状态。
- 调用 API 获取最新数据（如订单列表页返回时刷新未读数）
- 重启定时器（倒计时、轮播自动播放、心跳检测）
- 手动恢复滚动位置（配合
ref和$nextTick获取真实 DOM 后设置scrollTop） - 重置临时 UI 状态（例如清空搜索框输入、关闭下拉菜单、重置表单校验错误提示）
- 重新绑定原生事件监听器（如
addEventListener添加的全局键盘快捷键）
必须配对使用 onDeactivated 清理资源
onActivated 启动什么，onDeactivated 就该停掉什么，否则容易引发内存泄漏或逻辑冲突。
- 清除定时器（
clearInterval/clearTimeout） - 取消正在进行的请求（用
AbortController或取消 token） - 移除手动添加的 DOM 事件监听器（
removeEventListener） - 暂停动画或视频播放
常见误用提醒
❌ 把数据初始化（如用户基本信息、静态配置）放在 onActivated ——应移到 setup 或 onMounted 中执行一次
❌ 期望 onActivated 在组件首次加载时替代 onMounted ——首次仍走 created → mounted → activated 链路，但仅当被 <keep-alive></keep-alive> 包裹才触发 activated
❌ 监听子组件激活状态却没让子组件暴露事件或响应式状态 ——父组件无法直接捕获子组件的 onActivated，需子组件主动 emit 或暴露 isActive ref 并由父组件 watch
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
