Vue单文件组件需被包裹才能触发onActivated钩子；在中导入并调用onActivated，仅当组件缓存后重新激活（如路由返回或v-if重显）时执行。

要让 Vue 单文件组件在激活时触发 onActivated 钩子，核心前提是：该组件必须被 包裹，且处于缓存状态中被重新显示。

必须用 keep-alive 包裹组件

onActivated 不是普通生命周期钩子，它只在 的上下文中生效。如果组件没被包裹，哪怕写了 onActivated 也不会执行。

• 在父组件或路由视图中，用 包住目标组件：

  

• 如果是路由场景，通常在 外层加 keep-alive：

  

在 setup 中正确注册 onActivated

Vue 3 组合式 API 中，需从 vue 显式导入并调用：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 在 <script setup></script> 中直接使用：

import { onActivated } from 'vue'

onActivated(() => {
  console.log('组件被唤醒，可刷新数据或重启定时器')
  // 例如：fetchData()
)

• 注意：不能在普通函数或条件语句中调用 onActivated，必须在 setup 顶层同步执行。

触发 onActivated 的两种真实场景

只有以下任一情况发生，且组件已被缓存，才会真正执行 onActivated：

• 组件首次挂载，且被 包裹（此时顺序为：setup → onBeforeMount → onMounted → onActivated）
• 组件已缓存，再次回到视图——比如从路由 A 切换到 B 后又切回 A，或通过 v-if 从 false 变为 true，或动态组件 is 值变更后命中缓存

常见失效原因排查

写了 onActivated 却没执行？大概率是这些原因：

• 组件没被 包裹（最常见）
• 组件被 include 或 exclude 规则排除了缓存
• 使用了 key 导致每次渲染都生成新实例，无法命中缓存
• 在非 setup 语法（如 Options API）中错误地写成 activated（应为 activated，但需确保是 Vue 2 写法；Vue 3 中必须用 onActivated）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！