Vue 生命周期在 Keep-alive 下有什么变化?掌握组件缓存后的逻辑

浅磊同学_8272

浅磊同学_8272

2026-03-25

875人浏览

原创

activated 和 deactivated 是 keep-alive 专属钩子:activated 在组件被激活(插入 dom)时触发,适合恢复定时器、发起刷新;deactivated 在组件停用(移出 dom)时触发,用于清理定时器、取消请求等。

vue 生命周期在 keep-alive 下有什么变化?掌握组件缓存后的逻辑

使用 keep-alive 包裹的组件,其生命周期钩子会新增两个专属钩子:activated 和 deactivated,同时部分常规钩子(如 mounted、created)的触发时机和频次也会改变——组件不再频繁销毁重建,而是被缓存复用。

activated 与 deactivated 是什么?

这两个是 keep-alive 专属的生命周期钩子,仅在组件被缓存机制管理时生效:

  • activated:组件被激活(从缓存中插入 DOM)时触发,相当于“重新显示”;每次切换回来都会执行,适合恢复定时器、启动监听、发起数据刷新等操作。
  • deactivated:组件被停用(移出 DOM 但保留在内存)时触发,相当于“暂时隐藏”;适合清理副作用,比如清除定时器、取消未完成的请求、解绑事件监听器。

常规钩子行为的变化

未使用 keep-alive 时,组件每次路由跳转或条件渲染都会完整走一遍 created → mounted → beforeUnmount → unmounted。而启用后:

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.2万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习