【Vue】Keep alive详解

在 Vue 中，keep-alive 是一个内置组件，用于缓存动态组件实例，避免重复渲染和销毁。这对于提高性能非常有用，特别是在频繁切换的组件中。

基本用法

<template><div id="app"><button @click="currentComponent = 'ComponentA'">Component A</button><button @click="currentComponent = 'ComponentB'">Component B</button><keep-alive><component :is="currentComponent"></component></keep-alive></div>
</template><script>
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';export default {name: 'App',components: {ComponentA,ComponentB},data() {return {currentComponent: 'ComponentA'};}
};
</script>

解释

模板部分：
- 使用 <keep-alive> 包裹需要缓存的组件。
- 使用 <component :is="currentComponent"></component> 动态切换组件。
脚本部分：
- 导入需要缓存的组件 ComponentA 和 ComponentB。
- 在 data 中定义当前显示的组件 currentComponent。

属性

keep-alive 组件支持以下属性：

include：字符串或正则表达式，指定哪些组件应该被缓存。
exclude：字符串或正则表达式，指定哪些组件不应该被缓存。
max：数字，指定最多缓存多少个组件实例。

示例

<template><div id="app"><button @click="currentComponent = 'ComponentA'">Component A</button><button @click="currentComponent = 'ComponentB'">Component B</button><keep-alive :include="['ComponentA']"><component :is="currentComponent"></component></keep-alive></div>
</template><script>
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';export default {name: 'App',components: {ComponentA,ComponentB},data() {return {currentComponent: 'ComponentA'};}
};
</script>

在这个示例中，只有 ComponentA 会被缓存，而 ComponentB 不会被缓存。

生命周期钩子

keep-alive 组件提供了两个生命周期钩子：

activated：当组件被激活时调用。
deactivated：当组件被停用时调用。

这些钩子可以用于执行一些特定的操作，例如数据刷新或状态保存。

// ComponentA.vue
export default {name: 'ComponentA',activated() {console.log('ComponentA activated');},deactivated() {console.log('ComponentA deactivated');}
};