keep-alive - 2024最新版前端秋招面试短期突击面试题【100道】 🗄️
<keep-alive> 是 Vue.js 中的一个内置组件，用于在组件切换时缓存组件的状态，避免重复渲染，从而提升应用性能。以下是关于 keep-alive 的详细总结。
1. 优势 🌟
- 状态保留：在组件切换过程中，
<keep-alive>可以将组件的状态保存在内存中，防止 DOM 的重复渲染。 - 性能提升：通过避免重复渲染，
<keep-alive>显著提升了应用的性能，尤其是在需要频繁切换组件的场景中。
2. 使用方法 ⚙️
在 Vue Router 中，可以将 <keep-alive> 组件包裹在 <router-view> 的插槽中，以实现组件的状态缓存。
示例代码
<template><router-view v-slot="{ Component }"><keep-alive><component :is="Component" /></keep-alive></router-view>
</template>
在这个例子中，<keep-alive> 包裹了 Component，使得切换的组件能够保持状态。
3. 缓存单个页面 🔒
<keep-alive> 组件提供了以下属性来控制缓存行为：
-
include：可以通过指定组件的
name属性来缓存特定的页面。<keep-alive include="ComponentA"><component :is="Component" /> </keep-alive> -
exclude：用于排除指定的
name属性页面，其他页面将被缓存。<keep-alive exclude="ComponentB"><component :is="Component" /> </keep-alive> -
max：设置缓存组件的最大数量，以限制内存占用。
<keep-alive :max="10"><component :is="Component" /> </keep-alive>
4. 新增钩子函数 🔄
<keep-alive> 还支持两个钩子函数，用于管理组件的激活和停用：
-
activated：在组件被激活时调用。
activated() {console.log('组件被激活'); } -
deactivated：在组件停用时调用。
deactivated() {console.log('组件被停用'); }
5. 生命周期钩子顺序 📅
使用 <keep-alive> 组件时，组件的生命周期钩子顺序如下：
-
进入页面时：
createdactivated
-
离开页面时：
deactivated→ 离开上一个组件
总结 📝
<keep-alive> 是 Vue.js 中非常有用的一个组件，特别适用于需要频繁切换的组件场景。通过缓存组件状态，它帮助开发者在提升性能的同时，保持良好的用户体验。在面试中能够清晰地解释 keep-alive 的使用场景和实现细节，将为你加分不少！希望这些知识能帮助你顺利应对相关问题，成功上岸！
