activated 和 deactivated 是 keep-alive 专属钩子：activated 在组件被激活（插入 DOM）时触发，适合恢复定时器、发起刷新；deactivated 在组件停用（移出 DOM）时触发，用于清理定时器、取消请求等。
使用 keep-alive 包裹的组件，其生命周期钩子会新增两个专属钩子：activated 和 deactivated，同时部分常规钩子（如 mounted、created）的触发时机和频次也会改变——组件不再频繁销毁重建，而是被缓存复用。
activated 与 deactivated 是什么？
这两个是 keep-alive 专属的生命周期钩子，仅在组件被缓存机制管理时生效：
- activated：组件被激活（从缓存中插入 DOM）时触发，相当于“重新显示”；每次切换回来都会执行，适合恢复定时器、启动监听、发起数据刷新等操作。
- deactivated：组件被停用（移出 DOM 但保留在内存）时触发，相当于“暂时隐藏”；适合清理副作用，比如清除定时器、取消未完成的请求、解绑事件监听器。
常规钩子行为的变化
未使用 keep-alive 时，组件每次路由跳转或条件渲染都会完整走一遍 created → mounted → beforeUnmount → unmounted。而启用后：
-
created和mounted仅在组件首次加载时执行一次；后续再进入，不会重复调用。 -
beforeUnmount和unmounted不会触发——组件没有被销毁，只是被缓存起来。 - 如果组件设置了
include/exclude或使用max限制缓存数量，超出时会被自动移出缓存，此时才会触发unmounted。
如何配合 useActivated / useDeactivated（组合式 API）？
在 Vue 3 的 setup 中，无法直接写 activated 钩子函数，需借助 onActivated 和 onDeactivated：
立即学习“前端免费学习笔记（深入）”；
onActivated(() => { /* 组件显示时逻辑 */ })onDeactivated(() => { /* 组件隐藏时逻辑 */ })- 它们内部会自动绑定到当前组件实例的激活/停用周期，且支持响应式依赖收集（比如结合
ref或computed做状态同步）。
实际开发中的注意点
缓存带来便利的同时也容易引发隐性问题：
- 组件内
data或ref状态会一直保留，若没在activated中做更新（比如拉新数据），用户看到的可能是旧内容。 - 全局事件或定时器若只在
mounted中注册、unmounted中清理，那在keep-alive下将漏掉清理时机，导致内存泄漏或重复执行。 - 表单类组件若含 v-model 绑定的本地状态，切走再切回时值还在，这本是优点，但若业务要求每次进入都重置，则必须手动在
activated中清空。
