vue2 keep-alive 缓存页面的 生命周期2
2021-09-27 02:35:42
在 Vue 2 中，keep-alive 是一个内置组件，用于缓存包裹的动态组件或路由组件，避免重复渲染导致的性能损耗。被缓存的组件会触发特定的生命周期钩子，其执行顺序和场景如下：
核心生命周期钩子被 keep-alive 缓存的组件会触发以下生命周期钩子，与普通组件的区别主要体现在 首次加载 和 组件复用 时：
首次加载（未缓存时）执行顺序与普通组件一致：
beforeCreate
created
beforeMount
activated（首次不会触发，仅在后续激活时调用）
mounted
组件被缓存后复用当组件从缓存中激活时，跳过 beforeCreate、created、beforeMount、mounted，直接触发：
activated在组件被激活时调用（如路由切换回该页面或组件重新显示），适合执行数据更新或重新请求等操作。
组件被缓存后隐藏当组件被移出 DOM（如路由跳转）但未销毁时，触发：
deactivated在组件被停用时调用（如离开路由或隐藏组件），适合清理定时器、取消请求等操作。
组件销毁（非缓存场景）若组件未被 keep-alive 缓存，或手动销毁时，触发：
beforeDestroy
destroyed
- 组件未被缓存，按普通流程加载：beforeCreate → created → beforeMount → mounted
- 不会触发 activated/deactivated。
- 离开详情页时：触发 deactivated（组件被缓存，未销毁）。
- 返回详情页时：触发 activated（从缓存中恢复，跳过 mounted 等）。
activated/deactivated 的用途
在 activated 中重新获取数据（如列表页返回时刷新）。
在 deactivated 中清理事件监听或定时器，避免内存泄漏。
与路由结合若需对特定路由组件缓存，需在路由配置中添加 meta 字段，并通过 include/exclude 控制：
// router.js{ path: '/detail', component: Detail, meta: { keepAlive: true } // 标记需要缓存}// App.vue<keep-alive :include="cachedViews"> <router-view></router-view></keep-alive>缓存控制
include：字符串或正则，匹配组件名缓存。
exclude：排除特定组件不缓存。
max：限制缓存组件数量（避免内存占用过高）。
keep-alive 通过 activated 和 deactivated 钩子优化了组件复用逻辑，开发者需根据业务场景合理使用，避免无效渲染或数据不同步问题。首次加载与缓存复用的生命周期差异是核心关注点。
热门标签
