【vue高频面试题—生命周期篇】：生命周期和keep-alive的关系

在 Vue 中，keep-alive 是一个特殊的组件，用于缓存组件实例以优化性能。它与 Vue 的生命周期有特殊的交互关系，尤其是在组件的创建和销毁流程中。

---

keep-alive 和 Vue 生命周期的关系

1. 常规组件的生命周期

   • 一个普通组件在被销毁时，依次执行以下生命周期钩子：

     • beforeDestroy → destroyed

   • 当组件重新挂载时，会重新经历从 beforeCreate 到 mounted 的完整生命周期。

2. keep-alive 缓存的组件

   • 被 keep-alive 包裹的组件在切换时不会被真正销毁，而是被缓存起来。Vue 为此提供了两对额外的生命周期钩子：

     • activated：当组件从缓存中被激活时触发。
     • deactivated：当组件被切换到后台并进入缓存时触发。

钩子调用顺序对比

普通组件	keep-alive 缓存的组件
beforeCreate	beforeCreate
created	created
beforeMount	beforeMount
mounted	mounted
...	...
切换组件时销毁：	切换组件时缓存：
beforeDestroy	deactivated
destroyed	-
重新加载组件时：	重新激活缓存组件时：
beforeCreate	activated
created	-

---

使用场景

1. 普通组件（未使用 keep-alive）

   • 在组件切换时，组件会被完全销毁并重新创建，适合不需要缓存的场景，如简单的表单或无需保留状态的页面。

2. keep-alive 组件

   • 适用于需要缓存状态的组件，例如：

     • 一个分页列表，切换到详情页后再返回需要保留原分页状态。
     • Tab 切换中不同内容的组件。

   • 优化性能，避免组件频繁销毁和重新创建。