关于在vue3中使用keep-live+component标签组合,实现对指定某些组件进行缓存或不缓存的问题

今天收到一个需求,在vue3写的动态组件条件下,要对指定的几个vue组件进行缓存。

我们用到了keep-live+component标签进行动态的渲染

可以通过exclude(排除)和include(包含)来进行指定缓存

html 复制代码
<el-tabs v-model="activeName" type="card" @tab-click="handleTabs" class="groupCard">
      <el-tab-pane v-for="(v, i) in tabList" :key="i" :label="v.label" :name="v.name">
        <keep-alive :exclude="['comA','comB','comC']">
          <component
            :is="v.cpt"
          />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>

要注意!此处的comA,要与组件的name对应

TypeScript 复制代码
<script setup lang="ts">
    defineOptions({ name: 'comA' })
</script>
相关推荐
顾林海5 分钟前
Flutter Dart 流程控制语句详解
android·前端·flutter
tech_zjf6 分钟前
装饰器:给你的代码穿上品如的衣服
前端·typescript·代码规范
xiejianxin5207 分钟前
如何封装axios和取消重复请求
前端·javascript
parade岁月8 分钟前
从学习ts的三斜线指令到项目中声明类型的最佳实践
前端·javascript
狼性书生10 分钟前
electron + vue3 + vite 渲染进程与渲染进程之间的消息端口通信
前端·javascript·electron
阿里巴巴P8资深技术专家10 分钟前
使用vue3.0+electron搭建桌面应用并打包exe
前端·javascript·vue.js
coder_leon14 分钟前
Vite打包优化实践:从分包到性能提升
前端
shmily_yyA14 分钟前
【2025】Electron 基础一 (目录及主进程解析)
前端·javascript·electron
吞吞071117 分钟前
浅谈前端性能指标、性能监控、以及搭建性能优化体系
前端
JiangJiang18 分钟前
5 分钟掌握 TypeScript 结构化类型系统,一次搞懂鸭子类型!
javascript·面试