关于在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>
相关推荐
刘发财3 小时前
弃用html2pdf.js,这个html转pdf方案能力是它的几十倍
前端·javascript·github
牛奶5 小时前
2026年大模型怎么选?前端人实用对比
前端·人工智能·ai编程
牛奶5 小时前
前端人为什么要学AI?
前端·人工智能·ai编程
Kagol8 小时前
🎉OpenTiny NEXT-SDK 重磅发布:四步把你的前端应用变成智能应用!
前端·开源·agent
GIS之路9 小时前
ArcGIS Pro 中的 notebook 初识
前端
JavaGuide9 小时前
7 道 RAG 基础概念知识点/面试题总结
前端·后端
ssshooter10 小时前
看完就懂 useSyncExternalStore
前端·javascript·react.js
格砸10 小时前
从入门到辞职|从ChatGPT到OpenClaw,跟上智能时代的进化
前端·人工智能·后端
Live0000011 小时前
在鸿蒙中使用 Repeat 渲染嵌套列表,修改内层列表的一个元素,页面不会更新
前端·javascript·react native
柳杉11 小时前
使用Ai从零开发智慧水利态势感知大屏(开源)
前端·javascript·数据可视化