关于在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>
相关推荐
IT_陈寒5 分钟前
Redis 高性能缓存设计:7个核心优化策略让你的QPS提升300%
前端·人工智能·后端
aklry8 分钟前
elpis之动态组件机制
javascript·vue.js·架构
井柏然12 分钟前
从 npm 包实战深入理解 external 及实例唯一性
前端·javascript·前端工程化
羊锦磊37 分钟前
[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
前端·vue.js·前端框架
brzhang1 小时前
高通把Arduino买了,你的“小破板”要变“AI核弹”了?
前端·后端·架构
她说..1 小时前
通过git拉取前端项目
java·前端·git·vscode·拉取代码
智能化咨询1 小时前
玩转ClaudeCode:通过Chrome DevTools MCP实现高级调试与反反爬策略
前端·chrome·chrome devtools
xjf77111 小时前
Nx项目中使用Vitest对原生JS组件进行单元测试
javascript·单元测试·前端框架·nx·vitest·前端测试
Roadinforest1 小时前
水墨风鼠标效果实现
前端·javascript·vue.js
银嘟嘟左卫门2 小时前
上手 Rokid JSAR:新手也能快速入门的 AR 开发之旅
前端