keep-alive 是 Vue 的一个内置组件，用于缓存其他组件的实例，以避免重复渲染和销毁，它可以在需要频繁切换的组件之间提供性能优化

目录

keep-alive?

使用 keep-alive 的示例代码：

手动清除组件缓存的示例代码：

keep-alive 组件有以下几个优点：

keep-alive 的原理：

使用 keep-alive 组件，你可以包裹需要缓存的组件，然后这些组件在切换时将会被缓存起来，而不是每次都重新创建。

keep-alive?

使用 keep-alive 的示例代码：

<template>
? <div>
? ? <button @click="toggleComponent">切换组件</button>
? ? <keep-alive>
? ? ? <component :is="currentComponent"></component>
? ? </keep-alive>
? </div>
</template>

<script>
export default {
? data() {
? ? return {
? ? ? currentComponent: 'ComponentA',
? ? };
? },
? methods: {
? ? toggleComponent() {
? ? ? if (this.currentComponent === 'ComponentA') {
? ? ? ? this.currentComponent = 'ComponentB';
? ? ? } else {
? ? ? ? this.currentComponent = 'ComponentA';
? ? ? }
? ? },
? },
};
</script>

我们有两个组件 ComponentA 和 ComponentB，点击按钮可以在两者之间进行切换。这两个组件被包裹在 keep-alive 组件中，所以切换时不会销毁和重新创建它们的实例。

如果你想手动清除 keep-alive 中的组件缓存，可以使用 include 和 exclude 属性。这两个属性接受一个字符串或正则表达式的数组，用于匹配需要缓存或排除的组件。

手动清除组件缓存的示例代码：

<template>
? <div>
? ? <button @click="clearCache">清除缓存</button>
? ? <keep-alive :include="includedComponents" :exclude="excludedComponents">
? ? ? <component :is="currentComponent"></component>
? ? </keep-alive>
? </div>
</template>

<script>
export default {
? data() {
? ? return {
? ? ? currentComponent: 'ComponentA',
? ? ? includedComponents: ['ComponentA'], // 需要缓存的组件列表
? ? ? excludedComponents: [], // 不需要缓存的组件列表
? ? };
? },
? methods: {
? ? clearCache() {
? ? ? this.$refs.keepAlive.cache = {};
? ? },
? },
};
</script>

添加一个按钮来触发清除缓存。includedComponents 数组用于指定需要缓存的组件，而 excludedComponents 数组用于指定不需要缓存的组件。通过修改这两个数组，你可以控制哪些组件应该被缓存或排除。

点击清除缓存按钮时，我们调用 this.$refs.keepAlive.cache = {}; 来直接清空 keep-alive 组件的缓存。

keep-alive 组件有以下几个优点：

• 减少组件的销毁和重新创建：使用 keep-alive 包裹需要缓存的组件，可以避免在组件切换时反复销毁和重新创建组件实例。这样可以节省性能，提高页面响应速度。

• 缓存组件状态：keep-alive 可以缓存包裹的组件的状态，包括数据、计算属性、观察者等。当组件被缓存起来时，这些状态都会被保留，再次渲染时可以直接使用，避免了重新初始化的开销。

• 提高组件复用性：通过使用 keep-alive，我们可以将一些通用的组件进行缓存，让它们可以在多个地方重复使用。这样可以减少代码冗余，并提高整体项目的可维护性。

keep-alive 的原理：

• 首次渲染：当第一次渲染 keep-alive 组件时，包裹的组件会被创建并渲染。同时，组件实例会被缓存起来。

• 切换组件：如果切换到其他组件，之前缓存的组件实例将被保留在内存中。新的组件会被创建并渲染，但之前的组件实例不会被销毁。

• 再次切换到已缓存的组件：如果再次切换回已经缓存的组件，之前的组件实例将被重新激活，并重新显示在页面上。这样可以保留组件的状态和数据，避免重新初始化。

• 清除缓存：如果需要手动清除某个组件的缓存，可以通过设置 include 和 exclude 属性来排除或包含特定的组件。也可以通过直接修改 $refs 对象来清空整个 keep-alive 组件的缓存。