keep-alive 实现 缓存动态组件 及include--exclude的用法

最新推荐文章于 2024-02-29 17:05:57 发布
最新推荐文章于 2024-02-29 17:05:57 发布
阅读量421 收藏 1
点赞数
分类专栏： vue-个人杂记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44754351/article/details/110121040
版权

1.需求
在这里插入图片描述
2.实现代码

<el-tabs v-model="tabCurrentName" @tab-click="handleClick">
  <el-tab-pane
    v-for="(item, index) in tabnames"
    :key="'customer'+index"
    :label="item.label"
    :name="item.name"/>
</el-tabs>
<keep-alive exclude="CRMBaseInfo,RelativeHandle">
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

include 使该标签作用于所有name属性的值跟此标签 include的属性值一致的vue页面
exclude 使该标签不作用于所有name属性的值跟此标签 exclude的属性值一致的vue页面

在这里插入图片描述

Arvin-wm
关注
专栏目录
【前端 - Vue】之 Keep-Alive缓存组件使用语法及原理解析，超详细！
共同学习，共同成长
06-01 2407
keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。本篇讲解Keep-Alive缓存组件使用语法及原理解析，超详细！
keep-alive组件缓存
前端程序猿的博客
02-22 6887
前言动态组件扩展关于is1.动态组件2.is的用法组件缓存扩展跟keep-alive有关的生命周期是哪些?activateddeactivated
动态组件和keep-alive组件缓存：
weixin_48123820的博客
05-04 847
动态组件是指：在一个挂载点使用多个组件，并进行动态切换。可能对于新手来说，这句话有些难理解，什么是挂载点?可以简单的理解为页面的一个位置。最常见的就是：tab的切换功能。在vue要实现这个功能通常用两种方式。一是使用<component>元素的 is 的特性，二是使用 v-if。在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染。
在动态组件上使用keep-alive 注意点
碉堡飞哥的博客
03-10 467
include： 字符串或正则表达式，只有名称匹配的组件会被缓存 注意：匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。 exclude： 字符串或正则表达式，名称匹配的组件不会被缓存》 max：  数字，最多可以缓存多少组件实例 ...
Vue—keepAlive 动态管理页面缓存
qq_33721778的博客
10-10 2362
是Vue的内置组件，当他包裹组件时，会对组件进行缓存，不去销毁组件。首次进入页面时，会触发mounted和activated钩子，当页面被缓存下来后，进入页面只会触发activated钩子，离开页面会触发，不会触发destroyed。
vue开发：动态缓存组件—动态应用keep-alive
yman_pro的博客
06-16 4537
vue动态缓存：动态应用keep-alive 在实现动态缓存之前，先了解以下技术点: 1.假设A组件用了缓存，则A组件首次加载的钩子执行顺序：created—> activated —> mounted，而再次返回A组件时只会执行activated，如果你想每次进入A组件都做一些事情的话，你可以放在activated里面 2.使用include和exclude的时候，必须给所有路由管理起来的vue组件都设置name属性，后果不赘述。 3.当同时使用include和exclude的时候，exclu
动态keep-alive缓存组件
weixin_43909743的博客
02-14 243
keep-alive 动态缓存
vue中keep-alive，include的缓存问题
10-15
然而，在使用`keep-alive`组件的`include`属性时，可能会出现一些缓存问题。`include`属性允许我们指定哪些组件应该被缓存，这样只有匹配到的组件实例在切换路由或组件时才会被缓存。 首先，让我们来了解一下`keep-...
vue 使某个组件不被 keep-alive 缓存的方法
10-17
然后在`keep-alive`中使用`include`或`exclude`，结合组件的`name`或`meta`属性来控制缓存： ```html <keep-alive :include="cachedComponents"> <router-view/> </keep-alive> ``` 在`data`中维护`...
keep-alive不能缓存多层级路由菜单问题解决
10-15
在Vue.js应用中，`keep-...务必注意，`keep-alive`的`include`和`exclude`属性也可以用来更精确地控制哪些组件应该被缓存。在某些情况下，你可能还需要考虑组件之间的交互和数据同步问题，以确保缓存状态的一致性。
vue keep-alive动态缓存方案
m0_54364474的博客
05-29 4887
vue keep-alive动态缓存
Vue动态缓存KeepAlive
最新发布
zg97zb的博客
02-29 377
思路：通过将 aliveRoutes 加入Vuex进行状态管理，然后通过actions来动态改变aliveRoutes。在初始化路由时可以将路由中需要缓存的组件的name添加到 aliveRoutes 中。vue中keep-alive组件主要有三个常用的props。
vue中的keep-alive组件实现缓存并动态清除功能实现
我的博客
07-03 4030
综述：一个需要细细品味和分析的问题，当前有三个页面a=>b=>c,需要从c到b时，使用缓存数据，因此引入了keep-alive组件，但是第二次从a到c时，依然还是缓存数据，就需要清除缓存数据了；由此引发一个问题，实现一个路由组件，页面跳转的时候，前进动态获取数据，后退使用缓存，这个功能该怎样实现？ 1.方案一 使用sessionStorage等绘画层存储方法保存数据 2.方案...
Vue 使用 ＜keep-alive include＞ 实现多级 ＜router-view＞ 缓存，无限层次缓存
热门推荐
cimo的博客
11-09 1万+
使用 <keep-alive> 实现缓存目前主流的有两种方法 方法一： 在路由元信息中添加缓存标识： { path: 'json', name: 'json', meta: { ... keepAlive: true ... }, component: () => import('../views/components/json') }, 使用 v-if 判断是否缓存 <keep-alive> <router-v
Vue——动态组件、缓存组件keep-alive、异步组件
qq_52301431的博客
09-08 1520
有时候我们希望在A组件时用户做了一些操作，切换B组件时做了一些操作，当切回A组件时希望记住A的操作，不要重新创建A组件，keep-alive可以缓存动态切换的组件。在单页应用中，如果没有用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验。动态组件的切换，切换后是不会缓存之前被切换掉的组件的，每次切换新组件的时候，Vue 都创建了一个新的组件对象。==>使用场景： 上面的大分类，点了之后，去选择下面小分类，进行网络请求。
keep-alive 的 exclude 设置多个组件部分无效。
ZL_2014的博客
04-25 955
问题描述         如下代码，设置了三个组件状态不被保存，但是只有第一个能有效，剩余两个均无效。 <!-- vue-router --> <div id="content"> <keep-alive exclude="Article, Pager, ReditPage"> <router-view></router-view> </kee
vue组件缓存之keep-alive正确使用姿势
越是安静内敛的人，越容易生不惊人死不休
06-06 7219
em...新的问题又出现了,由于 列表页被缓存了,这个时候我从首页,再点击进入某个列表，也不刷新了，完了，点击首页导航应该进入不同的列表页的. 也就是说，从首页进入列表组件不应该被缓存的。但是但是，我们的项目是用vue开发的webapp,多个组件共用一个窗口，当我们切换路由时，切出路由组件会销毁，所有列表页进入详情页列表页会销毁，重新回到列表页，列表页组件会重新加载。这样需求，如果是小程序的话，默认列表页就会缓存，因为小程序的运行环境是微信客户端，当我们打开一个页面会新建一个webview，
动态设置keepAlive的问题
ju_vlog的博客
04-26 698
思路： 1.在app页面里给keepAlive设置一个动态的 :exclude="cachedViews"，cachedViews：this.$store.state.cachedViews 2.当支付成功后，在支付成功页面判断，status==1时候 =>在vuex设置一个参数isKeepAlive==false，表示支付成功过了，并且触发mutation里面的方法 3. mutation里设置一个方法，判断isKeepAlive==false，就把form表单的name添加到cachedV.
vue 动态设置keepalive缓存，手动清除缓存
@梢的博客
12-04 1万+
最近在做电商项目时，有这样一个需求。 需求： 个人中心=>我的订单 (我的订单页面,期望是新生成的) 我的订单=>订单详情 (对我的订单进行缓存，保留滚动位置及当前所处的tab页面） 订单详情回退=>我的订单（恢复之前的样子） 问题 如果对我的订单设置keepalive缓存，在个人中心=>我的订单会读之前的缓存，不符合预期。 如果不设置缓存，在订单详情回退到=>我的订单会重新生成界面，不符合预期 解决方法 将我的订单设置缓存 { name: 'order'
Vue keep-alive深度解析：组件缓存与生命周期管理
深入理解Vue的`keep-alive`组件是开发者在日常开发中处理...通过合理使用`include`、`exclude`和生命周期钩子，开发者可以灵活地决定哪些组件应该被缓存，何时应该重新渲染，从而实现流畅的用户体验和高效的代码结构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值