【vue3】keep-alive缓存组件

  • include定义要缓存的组件名。注意,不是引入的别称,就是组件的文件名
  • exclude定义不缓存的组件名。一样的,这里是组件的文件名
  • max最多缓存多少个组件。如果组件个数大于max,会自动剔除掉不常用的
  • 使用keep-alive后会增加两个生命周期:onDeactivatedonActivated(在子组件内使用)
html 复制代码
<template>

    <div class="yyx-box">
        <el-button type="primary" @click="change">切换组件</el-button>
        <!-- include定义要缓存的组件名。注意,不是引入的别称,就是组件的文件名 -->
        <!-- exclude定义不缓存的组件名。一样的,这里是组件的文件名 -->
        <!-- max最多缓存多少个组件。如果组件个数大于max,会自动剔除掉不常用的 -->
        <!-- 使用keep-alive后会增加两个生命周期:onDeactivated、onActivated(在子组件内使用) -->
        <keep-alive :include="['test1','test2']" :exclude="['test2']" :max="1">
            <Test1 v-if="flag"></Test1>
            <Test2 v-else></Test2>
        </keep-alive>

    </div>



</template>

<script setup lang='ts'>
    import { ref } from 'vue'
    import Test1 from '../components/test1.vue';
    import Test2 from '../components/test2.vue';

    let flag = ref<boolean>(true)
    const change  = ()=>{
        flag.value = !flag.value
    }


</script>
<style scoped lang='scss'>
    @include b(box){
        height: 100%;
        overflow: auto;
    }

</style>
相关推荐
GIS程序媛—椰子31 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_00137 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端40 分钟前
Content Security Policy (CSP)
前端·javascript·面试
木舟100944 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
材料苦逼不会梦到计算机白富美1 小时前
golang分布式缓存项目 Day 1
分布式·缓存·golang
Java 第一深情1 小时前
高性能分布式缓存Redis-数据管理与性能提升之道
redis·分布式·缓存
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习