Vue 3 中监听组件“进入缓存视图”和“离开缓存视图”的核心方式是使用 onActivated 和 onDeactivated 钩子，它们仅在组件被 keep-alive 包裹时生效，分别在组件从缓存中激活和停用时触发，与 mounted/unmounted 明确区分。
Vue 3 中监听组件“进入缓存视图”和“离开缓存视图”的核心方式，是使用 keep-alive 专属的生命周期钩子：`onActivated` 和 `onDeactivated`。它们只在组件被 `
用 Composition API 监听激活与停用
在 `setup()` 或 `<script setup>` 中，直接调用 Vue 提供的组合式生命周期函数：</script>
- `onActivated(() => { ... })`：组件从缓存中被重新展示（比如切换回该 Tab 或路由）时触发，每次进入都执行
- `onDeactivated(() => { ... })`：组件被隐藏但仍保留在缓存中（比如切到其他 Tab）时触发，每次离开都执行
- `onMounted(() => { ... })`：仅在组件**首次挂载**时执行一次，后续 `onActivated` 不会再触发它
✅ 示例：恢复定时器、重拉数据放 `onActivated`；清理定时器、取消请求放 `onDeactivated`。
用 Options API 监听激活与停用
在选项式写法中，直接定义对应的方法名即可：
立即学习“前端免费学习笔记（深入）”；
- `activated() { /* 组件被激活时执行 */ }`
- `deactivated() { /* 组件被停用时执行 */ }`
⚠️ 注意：这两个钩子只在 `
父组件如何监听子组件的激活/停用？
父组件无法直接监听子组件的 `activated`/`deactivated` 钩子，因为它们不是标准事件。但有间接方案：
- 子组件在 `onActivated` / `onDeactivated` 中主动 `$emit('activated')` 或 `$emit('deactivated')`，父组件用 `@activated` 接收（需子组件配合）
- 更通用的做法：子组件把状态（如 `isActive: ref(false)`）暴露给父组件，再通过 `watch` 监听该响应式值的变化
别混淆：`vnode-mounted` 不等于 `activated`
有人误用 `@vnode-mounted` 监听子组件——这是监听其 vnode 挂载（等价于 `mounted`），不适用于 keep-alive 场景。因为被缓存的组件再次显示时，`vnode-mounted` 不会再次触发，而 `onActivated` 会。
简单说：要响应“是否正在展示”，看 `onActivated`/`onDeactivated`；要响应“是否首次创建”，看 `onMounted`/`onUnmounted`。
