两分钟讲明白 keep-alive（含案例）

什么是 keep-alive

keep-alive 是 Vue 的内置组件，用于缓存不需要销毁的组件实例。它主要用于优化性能，尤其在需要频繁切换不同视图时，可以提高用户体验。vue项目中大多和router进行搭配使用，在切换页面组件的时候，缓存页面，提高性能。

怎么提高用户体验？

举个栗子：A页面是表单页，B页面是列表页。用户在A页面填写表单一半，想看下B页面的数据。

如果没有 keep-alive:那么A切换到B的时候，A组件被销毁，用户在A填写的数据都不存在了。所以从B返回A页面的时候，用户又要从头开始填写表单。

如果加了 keep-alive: 从A切换到B的时候，A页面会被缓存，填写的数据仍然存在。从B返回之后可以继续填写表单。

keep-alive 基础用法

在下面示例中，keep-alive 包裹了动态组件，根据按钮的点击切换 ViewA 和 ViewB。当用户在两个组件之间切换时，keep-alive 会缓存上一个组件的状态。

<template>
  <div>
    <button @click="toggleView">切换视图</button>
    <keep-alive>
      <component :is="currentView"></component>
    </keep-alive>
  </div>
</template>

<script>
import ViewA from './ViewA.vue';
import ViewB from './ViewB.vue';

export default {
  components: {
    ViewA,
    ViewB,
  },
  data() {
    return {
      currentView: 'ViewA',
    };
  },
  methods: {
    toggleView() {
      this.currentView = this.currentView === 'ViewA' ? 'ViewB' : 'ViewA';
    },
  },
};
</script>

原理

keep-alive 通过 Vue 的虚拟 DOM 和内部的组件状态管理机制实现缓存功能。当一个组件被放入 keep-alive 中时，它的实例会被保存到一个缓存数组中。当这个组件再次被渲染时，Vue 会从缓存中获取它的实例，而不是重新创建。

基础API

在使用 keep-alive 时，还有一些额外的属性可以进一步控制组件的行为：

• include：指定需要缓存的组件。
• exclude：指定不需要缓存的组件。
• max：设置缓存的最大数量。

Keep-alive 搭配 vue-router代码示例

<el-main>
  <router-view v-slot="{ Component }">
    <keep-alive :include="cacheRouterList">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</el-main>

1. <el-main>:

   • 这是 Element UI 的布局组件，通常用于定义应用的主内容区域。

2. <router-view>:

   • Vue Router 的内置组件，用于渲染匹配到的路由组件。
   • 这里使用了 v-slot 指令，解构出了一个名为 Component 的插槽属性，表示当前匹配的组件。

3. <keep-alive :include="cacheRouterList">:

   • keep-alive 组件用于缓存视图，只有那些被 include 属性指定的组件会被缓存。
   • :include="cacheRouterList" 表示一个动态的数组，这个数组包含了当前需要缓存的组件的名称。当访问这些组件时，它们的状态会被保持。

4. <component :is="Component" />:

   • 动态组件的语法，:is 属性允许在运行时选择要渲染的组件。
   • 此处的 Component 是通过 router-view 获取到的当前路由对应的组件。

设计思路和优点

1. 性能优化，提升用户体验:

   • 通过使用 keep-alive，当用户在不同的路由之间切换时，已经访问过的组件会被缓存，组件的状态（如输入框的内容、滚动位置等）在切换时会被保留，而不是被销毁和重新创建。这减少了不必要的性能消耗。
   • 用户在返回到某个页面时，能够看到之前的状态（例如输入的数据、滚动位置等），这提升了用户体验。

2. 灵活的缓存管理:

   • 通过动态定义 cacheRouterList，可以灵活控制哪些组件需要缓存，哪些不需要。开发者可以在逻辑中条件性地更新这个列表，以满足不同的业务需求。例如，可能希望在某些条件下不缓存某些页面。

3. 模块化和可维护性:

   • 可以通过 include 和 exclude 属性来控制需要缓存的组件，灵活性更高。
   • 使用 router-view 和动态组件结合 keep-alive 的方式使得代码结构清晰，符合 Vue.js 的设计理念，易于维护和扩展。

4. 适用于后台管理系统：

   • 在后台管理系统中，通常存在多个视图（例如用户管理、角色管理、权限管理等），使用 keep-alive 可以在不同视图之间切换时保持用户的输入和状态，使操作更加流畅。