【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>
相关推荐
sdgsdgdsgc1 小时前
Next.js企业级应用开发:SSR、ISR与性能监控方案
开发语言·前端·javascript
哲此一生9841 小时前
搭建Vue3工程(去除不必要的文件)
前端·javascript·vue.js
xujiangyan_2 小时前
Redis详解
数据库·redis·缓存
黑云压城After4 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务5 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友6 小时前
什么是断言?
前端·后端·安全
FIN66687 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4957 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1247 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树7 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端