【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>
相关推荐
醇醛酸醚酮酯3 小时前
多线程是如何保证数据一致和MESI缓存一致性协议
缓存
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in4 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl