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> 组件时，组件的生命周期钩子顺序如下：

• 进入页面时：

  • created
  • activated

• 离开页面时：

  • deactivated → 离开上一个组件

总结 📝

<keep-alive> 是 Vue.js 中非常有用的一个组件，特别适用于需要频繁切换的组件场景。通过缓存组件状态，它帮助开发者在提升性能的同时，保持良好的用户体验。在面试中能够清晰地解释 keep-alive 的使用场景和实现细节，将为你加分不少！希望这些知识能帮助你顺利应对相关问题，成功上岸！