vue keep-alive include exclude的使用

最新推荐文章于 2024-07-30 18:09:37 发布
最新推荐文章于 2024-07-30 18:09:37 发布
阅读量9.6k 收藏 2
点赞数 1
分类专栏： front 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qkzia123/article/details/81333074
版权

首先，被坑了半天的include和exclude的值应该是keep-alive中的组组件中定义的name。。

然后，include表现比较奇怪，不符合官网上写的，没生效。。

但exclude能生效，可以用exclude来变通。

之后的使用过程中，发现cache的行为还是有点奇怪和预想的有些出入，于是想到keep-alive 中的exclude字段究竟是什么时候确定生效，决定其中的组件是否cache，试验后发现是其中的组件显示的时刻就读取一遍exclude字段，决定该组件此次显示完、被隐藏后，下一次显示时是否走cache。

记录一下，能帮到其他人更好。。。

qkzia123
关注
专栏目录
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
keep-alive的排除和加入(include和exclude)
qq_55139096的博客
07-20 136
【代码】keep-alive的排除和加入(include和exclude)
keep-alive设置后不生效
最新发布
qq_49490164的博客
07-30 243
include绑定的name是组件内的name，不是路由的name,大小写要一致，否则不生效。在路由守卫那里，不管你的层级有几层，to.matched都替换成需要的层级即可。菜单层级太多，keep-alive缓存不了三级菜单，需要自己手动处理一下。
keep-alive
weixin_57750909的博客
06-02 351
一、什么是keep-alive 在平常开发中，有时页面跳转之间没有必要多次初始化，只需要保存页面数据即可。这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示shi
keep-alive用法（include、exclude、max）
热门推荐
yimeichengxuyuan的博客
10-13 2万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录1.用处2.属性3.介绍4.使用使用中可能遇到的问题 1.用处 主要用于保留组件状态或避免重新渲染。 2.属性 include 字符串，数组或正则表达式。只有名称匹配的组件会被缓存。 exclude 字符串，数组或正则表达式。任何名称匹配的组件都不会缓存。 max 数字。最多可以缓存多少组件实例。 3.介绍 < keep-alive > 包裹动态组件时，会被缓存不活动的组件实例，而不是销毁它们。 < ke
vue中keep-alive，include的缓存问题
10-15
1. 在`App.vue`中使用`keep-alive`包裹`router-view`，并将其`include`属性绑定到计算属性`keepAlive`上： ```html <keep-alive :include="keepAlive"> <router-view/> </keep-alive> export default { ...
vue组件 keep-alive 和 transition 使用详解
01-19
1.keep-alive 能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件...
vue中keep-alive组件的入门使用教程
12-10
Vue.js中的`<keep-alive>`组件是一种非常实用的功能，用于在组件切换过程中保持组件的状态，避免每次切换都重新创建和销毁组件实例。这在处理需要维持数据或状态的复杂应用时尤其有用，例如音乐播放应用中保持播放...
深入理解Vue keep-alive及实践总结
10-16
这时可以采取一些策略，比如动态决定组件是否被<keep-alive>包裹，或者使用某些Vue的特性来强制重新渲染组件。 综上所述，<keep-alive>是Vue框架中的一个非常实用的工具，可以用来优化组件的性能。通过对<keep-...
Vue之keep-alive详解
前端开发工程师
10-24 4423
``是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
keep-alive的深入理解和使用
老电影故事的博客
11-23 1530
一、什么是keep-alive? 有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。 官网解释： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中，a
vue中keep-alive的include、exclude两个属性--避坑 和使用2个钩子函数activated、deactivated
一家外包公司的码农，专职前端开发
02-08 5699
keep-alive用法简介：我们在切换路由的时候，上一个页面就会被销毁，新的页面也会被创建，keep-alive它可以缓存组件，防止组件销毁，也就是说，我们在进行路由切换时，上次访问的页面数据依然存在，不会进行销毁。 普通用法： 只需要用keep-alive把需要缓存的组件包裹即可： <keep-alive> <router-view></router-view> </keep-alive> include属性：字符串或正则表达式。
（2）vue通过include实现动态配置缓存路由
weixin_42283712的博客
09-21 2438
动态配置路由给路由添加缓存标志切换页面时将路由路径存到vuex内使用添加需要缓存的路由 下面用到的组件在之前有过介绍，有需要的话可以看一下之前的内容 给路由添加缓存标志 // router.js children: [ { path: '/testA/testA', meta: { title: '组件一', icon: 'el-icon-user-solid',
vue整理笔记
weixin_49964559的博客
10-10 417
什么是vue生命周期？ Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。 vue生命周期的作用是什么？ 它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。 vue生命周期总共有几个阶段？ 它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。 第一次页面加载会触发哪几个钩子？ 会触发 下面这几个beforeCreate, created, be
vue include html,vue项目引入SuperMap.Include.js
weixin_31970409的博客
06-25 686
vue项目引入SuperMap.Include.js时，报错：Uncaught SyntaxError: Unexpected token <想当初：之前在做ionic4+angularjs8项目时，需要引入image.png直接在根目录下index.html中全局方式引入：image.pngimage.png用的时候需要declare下：image.png现如今：superMap没有提供模...
Vue缓存路由（keep-alive） include不生效
m0_56219678的博客
02-08 2828
Vue缓存路由（keep-alive） include不生效
Vue-组件-props
qq_46199553的博客
08-30 417
4. 组件之间的父子关系 4.1 使用组件的三个步骤 案例： App.vue <template> <div class="app-container"> <h1>App 根组件</h1> <hr /> <div class="box"> <!-- 渲染 Left 组件和 Right 组件 --> <Left></Left> <Righ
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值