keep-alive的tab栏内容缓存
效果：
充实自我：
keep-alive：包裹动态组件，缓存组件的状态实例，避免每次切换组件时都要重新渲染，提高性能，应用于路由切换、Tab栏切换、表单状态保存。
控制缓存组件的行为特性：
include：只有名称匹配的组件会被缓存组件。可以是一个组件名称的字符串、数组或正则表达式
exclude：排除某些组件不被缓存名单，与include相对
max：设置缓存的最大数量。当超出最大数量时，最不常用的组件将被销毁。
生命周期钩子：
keep-alive会保持组件的状态不变，但它在组件激活和停用时，会触发两个生命周期钩子：
activated：当组件从缓存中被激活时触发
deactivated：当组件被缓存或销毁时触发
缓存的状态管理：
若需要手动清除组件的缓存状态，这时可以使用
key属性来强制刷新组件
keep-alive缓存路由页面案例：
const routes = [
{
path: '/home',
component: HomePage,
meta: { keepAlive: true }
},
{
path: '/about',
component: AboutPage,
meta: { keepAlive: false }
}
]
tab栏缓存的和没有缓存的代码：
<template>
<div>
<!-- Tab 切换 -->
<div class="tabs">
<button @click="currentTab = 'tab1'" :class="{ active: currentTab === 'tab1' }">Tab 1</button>
<button @click="currentTab = 'tab2'" :class="{ active: currentTab === 'tab2' }">Tab 2</button>
<button @click="currentTab = 'tab3'" :class="{ active: currentTab === 'tab3' }">Tab 3</button>
</div>
<!-- 使用 keep-alive 缓存 Tab 内容 -->
<!-- :key 绑定 currentTab 使得每次切换时强制 Vue 重新渲染组件 -->
<!-- :include="['Tab2', 'Tab3']" / :exclude=['Tab1'] -->
<keep-alive :include="['Tab2', 'Tab3']" :max="2">
<component :is="tabComponents[currentTab]" :key="currentTab"></component>
</keep-alive>
</div>
</template>
<script setup>
import { ref } from 'vue'
// Tab 组件
import Tab1 from './Tab1.vue'
import Tab2 from './Tab2.vue'
import Tab3 from './Tab3.vue'
// Tab 组件映射
const tabComponents = {
tab1: Tab1,
tab2: Tab2,
tab3: Tab3
};
// 当前选中的 Tab
const currentTab = ref('tab1');
</script>
<style scoped>
.tabs button {
margin: 10px;
padding: 10px;
cursor: pointer;
}
.tabs button.active {
background-color: #007bff;
color: white;
}
</style>
//Tab1页面
<template>
<div style="display: flex;flex-direction: column; justify-content: space-between; width: 50%; margin: 0 auto;">
<h1>没有被缓存</h1>
<h2>当前计数：{{ count }}</h2>
<button style="width: 100px ;height:30px;" @click="handel">+5</button>
<button style="width: 100px ;height:30px;" @click="delhandel">-5</button>
</div>
</template>
<script setup>
defineProps({
name: {
type: String,
default: 'Tab1' // 为组件定义 name
}
});
// 这里可以放置 Tab 2 的逻辑，数据或者其他操作
const count = ref(0)
const handel = () => {
count.value += 5;
}
const delhandel = () => {
count.value -= 5;
}
</script>
<style scoped>
/* Tab1 的样式 */
div {
padding: 20px;
background-color: red;
}
</style>
//Tab2页面
<template>
<div style="display: flex; flex-direction: column; justify-content: space-between;width: 50%; margin: 0 auto;">
<h1>被缓存</h1>
<h2>当前计数：{{ count }}</h2>
<button style="width: 100px ;height:30px;" @click="handel">+5</button>
<button style="width: 100px ;height:30px;" @click="delhandel">-5</button>
</div>
</template>
<script setup>
defineProps({
name: {
type: String,
default: 'Tab2' // 为组件定义 name
}
});
// 这里可以放置 Tab 2 的逻辑，数据或者其他操作
const count = ref(0)
const handel = () => {
count.value += 5;
}
const delhandel = () => {
count.value -= 5;
}
import { onActivated, onDeactivated } from 'vue';
onActivated(() => {
console.log('Tab2/Tab3 激活，缓存加载');
});
onDeactivated(() => {
console.log('Tab2/Tab3 停用，缓存卸载');
});
</script>
<style scoped>
/* Tab2 的样式 */
div {
padding: 20px;
background-color: pink;
}
</style>
//Tab3页面
<template>
<div style="display: flex;flex-direction: column; justify-content: space-between;width: 50%; margin: 0 auto;">
<h1>被缓存</h1>
<h2>当前计数：{{ count }}</h2>
<button style="width: 100px ;height:30px;" @click="handel">+1</button>
<button style="width: 100px ;height:30px;" @click="delhandel">-1</button>
</div>
</template>
<script setup>
defineProps({
name: {
type: String,
default: 'Tab3' // 为组件定义 name
}
});
// 将 count 初始化为数字类型
const count = ref(0); // 初始值应该是数字类型
const handel = () => {
count.value++; // 加 1
};
const delhandel = () => {
count.value--; // 减 1
};
import { onActivated, onDeactivated } from 'vue';
onActivated(() => {
console.log('Tab2/Tab3 激活，缓存加载');
});
onDeactivated(() => {
console.log('Tab2/Tab3 停用，缓存卸载');
});
</script>
<style scoped>
/* Tab2 的样式 */
div {
padding: 20px;
background-color: green;
}
</style>