Vue单文件组件需被包裹才能触发onActivated钩子；在中导入并调用onActivated，仅当组件缓存后重新激活（如路由返回或v-if重显）时执行。
要让 Vue 单文件组件在激活时触发 onActivated 钩子，核心前提是：该组件必须被 <keep-alive></keep-alive> 包裹，且处于缓存状态中被重新显示。
必须用 keep-alive 包裹组件
onActivated 不是普通生命周期钩子，它只在 <keep-alive></keep-alive> 的上下文中生效。如果组件没被包裹，哪怕写了 onActivated 也不会执行。
- 在父组件或路由视图中，用
<keep-alive></keep-alive>包住目标组件：
- 如果是路由场景，通常在
<router-view></router-view>外层加 keep-alive：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
在 setup 中正确注册 onActivated
Vue 3 组合式 API 中，需从 vue 显式导入并调用：
- 在
<script setup></script>中直接使用：
import { onActivated } from 'vue'
onActivated(() => {
console.log('组件被唤醒，可刷新数据或重启定时器')
// 例如：fetchData()
)
- 注意：不能在普通函数或条件语句中调用 onActivated，必须在 setup 顶层同步执行。
触发 onActivated 的两种真实场景
只有以下任一情况发生，且组件已被缓存，才会真正执行 onActivated：
- 组件首次挂载，且被
<keep-alive></keep-alive>包裹（此时顺序为：setup → onBeforeMount → onMounted → onActivated） - 组件已缓存，再次回到视图——比如从路由 A 切换到 B 后又切回 A，或通过 v-if 从 false 变为 true，或动态组件 is 值变更后命中缓存
常见失效原因排查
写了 onActivated 却没执行？大概率是这些原因：
- 组件没被
<keep-alive></keep-alive>包裹（最常见） - 组件被
include或exclude规则排除了缓存 - 使用了
key导致每次渲染都生成新实例，无法命中缓存 - 在非 setup 语法（如 Options API）中错误地写成 activated（应为 activated，但需确保是 Vue 2 写法；Vue 3 中必须用 onActivated）
