【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>
相关推荐
小桥风满袖41 分钟前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
小Wang1 小时前
npm私有库创建(docker+verdaccio)
前端·docker·npm
用户73087011793081 小时前
Vue中集成文字转语音:使用Web Speech API实现功能
前端
李重楼1 小时前
前端性能优化之 HTTP/2 多路复用
前端·面试
yanessa_yu1 小时前
全屏滚动网站PC端自适应方案
前端
RoyLin1 小时前
TypeScript设计模式:桥接模式
前端·后端·typescript
火星开发者1 小时前
Vue中实现Word、Excel、PDF预览的详细步骤
前端
brzhang1 小时前
干翻 Docker?WebAssembly 3.0 的野心,远不止浏览器,来一起看看吧
前端·后端·架构
lecepin2 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
IT_陈寒2 小时前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端