【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>
相关推荐
Lazy_zheng5 分钟前
前端如何做单元测试?
前端·单元测试
MrYZhou7 分钟前
如何给自己写的vscode插件安排ai聊天机器人
前端·人工智能·后端
zwhfyy31 分钟前
webstorm 设置总结
前端·ide·webstorm
李同学va1 小时前
Redis相关技术内容
数据库·redis·缓存
前端青山1 小时前
Node.js + MongoDB + Vue 3 全栈应用项目开发
开发语言·前端·javascript·vue.js·mongodb·node.js
pixle01 小时前
vue3实现一个无缝衔接、滚动平滑的列表自动滚屏效果,支持鼠标移入停止移出滚动
javascript·vue.js·vue
wakangda2 小时前
使用 React Native WebView 实现 App 与 Web 的通讯
前端·react native·react.js
练习两年半的工程师2 小时前
使用vite构建一个react网站,并部署到Netlify上
前端·react.js·前端框架
花花鱼3 小时前
ts 将100个元素,每行显示9个元素,然后显示出所有行的元素,由此我们延伸出一个项目需求的简单算法实现。
vue.js