目录
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组件的缓存。
