onActivated 钩子仅在组件被 <keep-alive> 包裹且真正显示时触发，需将 <keep-alive> 正确包裹 <router-view>、组件显式声明 name，并在首次挂载或缓存后重新激活时执行，常用于刷新数据、恢复滚动、启停定时器等。

onActivated 钩子只在组件被 <keep-alive> 包裹且真正“显示出来”时触发，不是组件一加载就执行，也不是每次路由跳转都无条件触发——它依赖缓存机制和渲染位置的双重保障。

必须用 <keep-alive> 包裹 router-view

很多开发者把 <keep-alive> 写在页面组件内部（比如在 List.vue 里包一层），结果 onActivated 完全不执行。这是错的。

正确做法是：把 <keep-alive> 加在 <router-view> 外层，让路由组件整体受缓存控制：

<router-view v-slot="{ Component }">
  <keep-alive :include="['List', 'Detail']">
    <component :is="Component" />
  </keep-alive>
</router-view>

组件必须有明确的 name 选项

被缓存的组件需要显式声明 name，否则 include 或 exclude 无法匹配，缓存可能失效，onActivated 也就不会触发。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

立即学习“前端免费学习笔记（深入）”；

在 Options API 中写：

export default {
  name: 'List',
  setup() {
    onActivated(() => { console.log('List 被激活') })
  }
}

在 Composition API 中同样要确保组件名可识别，尤其使用 defineComponent 时建议传入 name。

onActivated 触发的两种确切时机

• 组件首次挂载，且被 <keep-alive> 包裹：走完 onMounted 后立即触发 onActivated
• 组件已缓存，再次回到视图（如从详情页返回列表页、Tab 切换回来）：只触发 onActivated，不重复执行 onMounted 或响应式初始化

注意：如果组件没进缓存（比如被 exclude 掉、或未命中 include）、或 <router-view> 没被 <keep-alive> 包裹，onActivated 就不会调用。

常见用途与实用建议

• 需要刷新数据？先判断是否为「二次激活」：可用一个 ref 标记首次加载完成，之后在 onActivated 中按需拉新数据
• 要恢复滚动位置？配合 useScroll 或手动读取 el.scrollTop，在 onActivated 中还原
• 重启定时器或监听器？在 onActivated 中启动，在 onDeactivated 中清除，避免多个实例叠加
• 避免副作用堆积：不要在 onActivated 里反复添加全局事件监听，记得在 onDeactivated 里对称清理