Vue 中如何使用 `keep-alive` 优化组件的性能-CFANZ编程社区

哈喽，各位小伙伴，欢迎来到我是wangfang呀的博客！我是我是wangfang呀，虽然还在编程的“菜鸟”阶段，但我已经迫不及待地想和大家分享我一路上踩过的坑和学到的小技巧。如果你也曾为bug头疼，那么你来对地方了！今天的内容希望能够给大家带来一些灵感和帮助。

概述：`keep-alive` 的作用

在 Vue 中，keep-alive 是一个内置的抽象组件，主要用于缓存组件的状态。通过将组件包裹在 keep-alive 中，Vue 会保留组件的实例状态，避免每次切换时销毁和重新创建组件实例，从而提高性能，尤其是在需要频繁切换和展示多个组件时。

keep-alive 的作用：

缓存组件状态：在切换组件时，keep-alive 会缓存组件的实例，并且保留其状态（例如输入内容、滚动位置等）。当该组件重新显示时，它不会重新渲染，而是直接恢复之前的状态。
提高性能：通过缓存不需要每次都重新创建的组件，可以显著提高应用的性能，减少不必要的渲染和计算。

缓存组件的状态

1. 使用 `keep-alive` 保持组件的状态

keep-alive 可以缓存被包裹的组件的状态，这对于需要频繁切换的组件来说，特别有用。它能够在组件从视图中移除后保持其状态，而不是销毁组件实例。

示例：使用 `keep-alive` 缓存组件状态

<template>
  <div>
    <button @click="currentTab = 'home'">Go to Home</button>
    <button @click="currentTab = 'about'">Go to About</button>

    <keep-alive>
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'home',  // 控制当前显示的组件
    };
  },
  components: {
    home: {
      template: `<div>Home component content</div>`,
      mounted() {
        console.log("Home component mounted");
      }
    },
    about: {
      template: `<div>About component content</div>`,
      mounted() {
        console.log("About component mounted");
      }
    }
  }
};
</script>

代码解释：

组件 home 和 about 会根据 currentTab 进行动态切换。
使用 keep-alive 包裹 component，Vue 会缓存当前显示的组件，并保留其状态。切换组件时，已经被缓存的组件会继续保持其原有状态，避免了重新挂载和初始化。
mounted 钩子显示了组件是否每次被重新挂载。通过 keep-alive，只有第一次加载组件时会触发 mounted，后续切换时不会再触发。

条件缓存组件

keep-alive 还提供了 include 和 exclude 属性，允许开发者控制哪些组件需要缓存，哪些组件不需要缓存。

1. 使用 `include` 和 `exclude` 动态控制缓存的组件

include：指定需要缓存的组件。当组件匹配 include 列表时，它会被缓存。
exclude：指定不需要缓存的组件。当组件匹配 exclude 列表时，它不会被缓存。

示例：使用 `include` 和 `exclude` 控制缓存组件

<template>
  <div>
    <button @click="currentTab = 'home'">Go to Home</button>
    <button @click="currentTab = 'about'">Go to About</button>

    <keep-alive :include="['home']">
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'home',  // 当前显示的组件
    };
  },
  components: {
    home: {
      template: `<div>Home component content</div>`,
    },
    about: {
      template: `<div>About component content</div>`,
    },
  },
};
</script>

代码解释：

使用 include 属性，只有 home 组件会被缓存，about 组件不会被缓存。
当用户切换到 about 页面时，about 组件会被销毁并重新创建，而 home 组件在切换到其他组件时会被缓存，保留其状态。

2. 使用 `exclude` 排除不缓存的组件

<template>
  <div>
    <button @click="currentTab = 'home'">Go to Home</button>
    <button @click="currentTab = 'about'">Go to About</button>

    <keep-alive :exclude="['about']">
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'home',  // 当前显示的组件
    };
  },
  components: {
    home: {
      template: `<div>Home component content</div>`,
    },
    about: {
      template: `<div>About component content</div>`,
    },
  },
};
</script>

代码解释：

使用 exclude 属性，about 组件不会被缓存，home 组件会被缓存。每次切换到 about 页面时，都会销毁并重新渲染该组件。

使用 `keep-alive` 缓存组件状态并提高性能

keep-alive 通过避免频繁的组件销毁和重新渲染，能够显著提高性能，尤其是在复杂的应用中，多个组件需要频繁切换时。结合 include 和 exclude 属性，开发者可以灵活地控制哪些组件需要缓存，哪些不需要缓存。

示例：使用 `keep-alive` 缓存组件状态并提高性能

<template>
  <div>
    <button @click="currentTab = 'home'">Go to Home</button>
    <button @click="currentTab = 'about'">Go to About</button>
    <button @click="currentTab = 'profile'">Go to Profile</button>

    <keep-alive :include="['home', 'profile']">
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'home',  // 当前显示的组件
    };
  },
  components: {
    home: {
      template: `<div>Home component content</div>`,
    },
    about: {
      template: `<div>About component content</div>`,
    },
    profile: {
      template: `<div>Profile component content</div>`,
    },
  },
};
</script>