Vue 中 keep-alive 组件的生命周期钩子
本文来自于我关于 Vue生命周期钩子 的系列文章。欢迎阅读、点评与交流~
1、Vue 中的生命周期钩子
2、Vue 中 keep-alive 组件的生命周期钩子
1. keep-alive 组件概述
keep-alive是 Vue 的内置组件，用于缓存不活动的组件实例，而不是销毁它们。这样可以：
- 保留组件状态，避免重新渲染
- 提高应用性能
- 减少重复的 DOM 操作
2. 基本用法
<template> <div> <keep-alive> <component :is="currentComponent"></component> </keep-alive> </div> </template>3. 专门的生命周期钩子
被keep-alive包裹的组件会获得两个额外的生命周期钩子：
activated
- 调用时机：组件被激活（从缓存中取出并插入到 DOM 中）时调用
- 使用场景：重新获取数据、开启定时器、重新绑定事件等
deactivated
- 调用时机：组件被停用（从 DOM 中移除并存入缓存）时调用
- 使用场景：清除定时器、取消事件监听、释放资源等
4. 完整生命周期执行顺序
首次加载
// 组件第一次进入时created()→mounted()→activated()切换到其他组件（当前组件被缓存）
// 当前组件被离开deactivated()再次切换回来
// 再次进入缓存的组件activated()组件被销毁（当离开路由或 keep-alive 被移除）
// 如果是直接离开路由deactivated()→beforeDestroy()→destroyed()// 注意：如果组件被 keep-alive 缓存，则不会触发 beforeDestroy 和 destroyed5. 实际示例
<template> <div> <button @click="toggle">切换组件</button> <keep-alive> <ComponentA v-if="showA" /> <ComponentB v-else /> </keep-alive> </div> </template> <script> // ComponentA.vue export default { name: 'ComponentA', data() { return { timer: null, count: 0 } }, created() { console.log('ComponentA created') }, mounted() { console.log('ComponentA mounted') }, activated() { console.log('ComponentA activated') // 重新开启定时器 this.timer = setInterval(() => { this.count++ console.log('定时器运行中:', this.count) }, 1000) }, deactivated() { console.log('ComponentA deactivated') // 清除定时器 if (this.timer) { clearInterval(this.timer) this.timer = null } }, beforeDestroy() { console.log('ComponentA beforeDestroy') }, destroyed() { console.log('ComponentA destroyed') } } </script>6. keep-alive 的属性配置
<!-- 只缓存特定组件 --> <keep-alive include="ComponentA,ComponentB"> <component :is="currentComponent"></component> </keep-alive> <!-- 排除某些组件 --> <keep-alive exclude="ComponentC"> <component :is="currentComponent"></component> </keep-alive> <!-- 使用正则表达式 --> <keep-alive :include="/ComponentA|ComponentB/"> <component :is="currentComponent"></component> </keep-alive> <!-- 限制最大缓存实例数 --> <keep-alive :max="5"> <component :is="currentComponent"></component> </keep-alive>7. 与 Vue Router 结合使用
// router.jsconstroutes=[{path:'/page1',component:Page1,meta:{keepAlive:true// 需要缓存}},{path:'/page2',component:Page2,meta:{keepAlive:false// 不需要缓存}}]<!-- App.vue --> <template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template>8. 注意事项和最佳实践
注意事项：
- name 属性必需：组件必须有
name选项才能被include/exclude匹配 - 嵌套 keep-alive：Vue 2.2.0+ 支持嵌套使用，但应避免过度使用
- 动态组件：与
<component :is="...">结合时最有用 - 内存管理：注意内存泄漏，及时在
deactivated中清理资源
最佳实践：
exportdefault{name:'MyComponent',// 必须设置 namedata(){return{// 数据会被缓存}},activated(){// 可以在这里重新获取可能需要更新的数据if(this.needsRefresh){this.fetchData()}},deactivated(){// 清理工作this.cancelPendingRequests()clearInterval(this.timer)},methods:{// 如果需要刷新数据的逻辑fetchData(){// 获取数据},cancelPendingRequests(){// 取消未完成的请求}}}9. Vue 3 中的变化
在 Vue 3 中，keep-alive的用法基本保持不变，但生命周期钩子名称有变化：
// Vue 3 Composition APIimport{onActivated,onDeactivated}from'vue'exportdefault{setup(){onActivated(()=>{console.log('组件被激活')})onDeactivated(()=>{console.log('组件被停用')})}}总结
keep-alive组件的生命周期钩子activated和deactivated为缓存组件提供了精确的控制能力。合理使用这些钩子可以有效管理组件状态、优化性能，同时避免内存泄漏等问题。在实际开发中，结合路由配置和动态组件，可以创建出体验更流畅的单页应用。
