keep-alive的tab栏内容缓存

效果:

充实自我:

keep-alive:包裹动态组件,缓存组件的状态实例,避免每次切换组件时都要重新渲染,提高性能,应用于路由切换、Tab栏切换、表单状态保存。

控制缓存组件的行为特性

include:只有名称匹配的组件会被缓存组件。可以是一个组件名称的字符串、数组或正则表达式

exclude:排除某些组件不被缓存名单,与include相对

max:设置缓存的最大数量。当超出最大数量时,最不常用的组件将被销毁。

生命周期钩子

keep-alive会保持组件的状态不变,但它在组件激活和停用时,会触发两个生命周期钩子:

activated:当组件从缓存中被激活时触发

deactivated:当组件被缓存或销毁时触发

缓存的状态管理:

若需要手动清除组件的缓存状态,这时可以使用**key** 属性来强制刷新组件

keep-alive缓存路由页面案例:

javascript 复制代码
const routes = [
  {
    path: '/home',
    component: HomePage,
    meta: { keepAlive: true }
  },
  {
    path: '/about',
    component: AboutPage,
    meta: { keepAlive: false }
  }
]

tab栏缓存的和没有缓存的代码:

javascript 复制代码
<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>
javascript 复制代码
//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>
javascript 复制代码
//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>
javascript 复制代码
//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>
相关推荐
jhonjson4 分钟前
在Flutter中,禁止侧滑的方法
前端·javascript·flutter
Dragon Wu23 分钟前
前端 JS面向对象 原型 prototype
前端·javascript
看月亮的方源34 分钟前
工作笔记--css文本溢出,盒子模型,NextTick回顾、console调试、样式穿透deep全家,el-upload文件上传,.9图
前端·javascript·vue.js
没资格抱怨41 分钟前
vue3中利用路由信息渲染菜单栏
前端·vue.js
TttHhhYy44 分钟前
vue写后台管理系统,有个需求将所有的$message消息提示换成确认框来增强消息提示效果,遇到嵌套过多的情况,出现某些问题
前端·javascript·vue.js·anti-design-vue
计算机学姐1 小时前
基于Python的高校成绩分析管理系统
开发语言·vue.js·后端·python·mysql·pycharm·django
excel1 小时前
three Lensflare 镜头光晕
前端
FIRE1 小时前
uniapp小程序分享使用canvas自定义绘制 vue3
前端·小程序·uni-app
四喜花露水1 小时前
vue elementui el-dropdown-item设置@click无效的解决方案
前端·vue.js·elementui
jokerest1232 小时前
web——sqliabs靶场——第五关——报错注入和布尔盲注
前端