keep-alive中max的使用

最新推荐文章于 2023-11-28 08:49:15 发布
最新推荐文章于 2023-11-28 08:49:15 发布
阅读量3.1k 收藏 2
点赞数
分类专栏： 细碎知识点 Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012733501/article/details/103576948
版权
Vue 同时被 3 个专栏收录
39 篇文章 0 订阅
订阅专栏
Web
39 篇文章 0 订阅
订阅专栏
Android
18 篇文章 0 订阅
订阅专栏

现有一个系统A通过Iframe集成到t其他系统B中。而A系统使用了keep-alive。如果A系统单独运行是有小标签的，关闭小标签，就不缓存关闭的组件，而现在集成到B系统中，那么我打开一个页面就等于缓存一个页面，而又无标签关闭，导致在IE浏览器中卡死，现在就解决这个。

方案一 ：B系统关闭标签通过postMessage 信息传递到A系统，让A系统自己调用关闭标签栏的动作，其实就是配合exclude来去掉不需要缓存的页面

方案二：通过正则表达式以及配合exclude来标识所有的组件都不进行缓存

方案三：使用max属性，以上没采用，因为系统初期做的时候，部分页面name就没填写，导致如果使用exclude，改动的比较大，所以使用max属性，最多可以缓存多少组件的实例。切记这个max属性必须大于0才能有效。。想所有组件都不缓存的想法破灭，至少有一个要被缓存

咻咻~~~

易01
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
keep-alive缓存组件使用(4)参数使用说明（include，exclude，max）部分缓存
jieweiwujie的博客
12-27 760
参数使用说明（include，exclude，max）
vue2.0 keep-alive最佳实践
01-19
vue2.0 keep-alive的最佳实践，供大家参考，具体内容如下 1.基本用法 vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 <keep> <component> <!-- 组件将被缓存 --> </component> </keep> 有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的 在使用keep-alive的情况下 <keep><router></router></keep> 将首次触发请求写在created钩子函数中,就能实现缓存
keep-alive用法（include、exclude、max）
热门推荐
yimeichengxuyuan的博客
10-13 2万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录1.用处2.属性3.介绍4.使用使用中可能遇到的问题 1.用处 主要用于保留组件状态或避免重新渲染。 2.属性 include 字符串，数组或正则表达式。只有名称匹配的组件会被缓存。 exclude 字符串，数组或正则表达式。任何名称匹配的组件都不会缓存。 max 数字。最多可以缓存多少组件实例。 3.介绍 < keep-alive > 包裹动态组件时，会被缓存不活动的组件实例，而不是销毁它们。 < ke
给我五分钟，我把 keep-alive 的用法和原理跟你说明白
qq_43477721的博客
10-06 1025
keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载。 主要是有include、exclude、max三个属性；前两个属性允许keep-alive有条件的进行缓存；max可以定义组件最大的缓存个数，如果超过了这个个数的话，在下一个新实例创建之前，就会将以缓存组件中最久没有被访问到的实例销毁掉。 两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。 Home.vue <template> <div class="hello"&.
keep-alive 的实现原理和使用方法
莫问前程F1的博客
08-20 947
export default { name: "keep-alive", abstract: true, // 抽象组件属性 ,它在组件实例建立父子关系的时候会被忽略,发生在 initLifecycle 的过程中 props: { include: patternTypes, // 被缓存组件 exclude: patternTypes, // 不被缓存组件 max: [String, Number] // 指定缓存大小 }, create.
keep-alive实现原理
Dimuzero的博客
12-14 1405
LRU缓存-keep-alive实现原理 keep-alive是Vue.js的一个内置组件。它能够将不活动的组件实例保存在u内存中，而不是直接销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。简单地说，keep-alive用于保存组件的渲染状态，避免组件反复创建和渲染，有效提高系统性能。 keep-alive的max属性，用于限制可以缓存多少组件实例，一旦这个数字达到了上限，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉 LRU缓存淘汰算法 LRU缓存淘汰算法：根据数
keep-alive你了解多少？
lishushuai的博客
03-21 4918
文章目录 一、keep-alive是什么？ 二、keep-alive属性 三、实现原理 总结 一、keep-alive是什么？ keep-alive的是vue的一个内置实例，通过这个属性可以缓存的组建的v-node。这样做有什么用呢？ 1.当你在对组件的反复切换的时候，去复用缓存的v-node,可以提高页面的渲染效率 2.可以防止在组件的切换的时候导致组件状态变化。 二、keep-alive属性 ke.
嘿，vue中keep-alive有个「大坑」你可能还不知道
最新发布
程序员成长指北
11-28 93
大厂技术高级前端Node进阶 点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群前言大家好，我是考拉????背景背景是这样的，我们使用vue2开发一个在线客服使用的IM应用，基本布局是左边是访客列表，右边是访客对话，为了让对话加载更友好，我们将对话的路由使用<keep-alive>缓存起来。但是如果将所有对话都缓存，未必会造成缓存过多卡顿的问题。自然，就使用上了&l...
HTTP连接管理的那些事儿
Ran's Hacking Zone
05-12 482
1. HTTP连接HTTP连接实际上就是TCP连接和一些使用连接的规则。TCP为HTTP提供了一条可靠的比特传输管道。从TCP连接一端填入的字节会从另一端以原有的顺序、正确地传送出来。E.g. http://blog.csdn.net/okingniko/article/details/50986039 1. 浏览器解析出主机名blog.csdn.net 2. 浏览器查询这个主机的IP地址(D
keep-alive的介绍及使用
01-08
如果需要频繁切换路由，这个时候就可以考虑用keep-alive了，来达到避免数据的重复请求的目的 keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗。 简单一点来说就是从页面A链接到其他页面后回退到页面A...
vue-router-keep-alive-helper:Vue.js缓存自动管理插件，自动创建、销毁缓存页面
04-12
Vue路由器保持活动帮助器 Vue Router Keep-alive Helper是用于管理Vue.js项目中的缓存页面的自动工具，只能使用一行配置代码。 English |为什么需要此帮手： 当使用vue-router开发Vue.js的SPA项目时， <keep>总是...
vue单页缓存方案分析及实现
01-19
实现全站的页面缓存，前进刷新，返回走缓存，并且能记住上一页的滚动位置，参考了很多技术实现，github上的导航组件实现的原理要么使用的keep-alive，要么参考了keep-alive的源码，但是只用keep-alive没法实现相同...
Goutte-masterWeb抓取器PHP类.zip
07-11
 $header[] ="Cache-Control: max-age=0";  $header[] ="Connection: keep-alive";  $header[] ="Keep-Alive: 300";  $header[] ="Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7";  $header[] ...
这一次，彻底搞懂Vue中的keep-alive
Always-Learning
04-10 1733
keep-alive的使用场景及其特点 用于Vue性能优化。 缓存组件。 频繁切换，不需要重复渲染。 keep-alive有include和exclude属性，这两个属性决定了哪些组件可以进入缓存。 keep-alive还有一个max属性，通过它可以设置最大缓存数，当缓存的实例超过max的时候，vue会删除最久没有使用的缓存，属于LRU缓存策略。 keep-alive其内部所有嵌套的组件都具有两个生命周期钩子函数，分别是activated和deactivated，它们分别在组件激活和失活的时候触发。
keep-alive的使用
weixin_61434466的博客
03-30 922
概念 keep-alive是vue的内置组件，当它包裹动态组件是，会缓存不活动的组件实例，而不是销毁他们 作用 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。 1.缓存所有页面 在 App.vue 里面 <template> <div id="app"> <keep-alive> <router-view/> </keep-alive> </di
对 keep-alive 的理解，使用场景以及存在的问题
小草莓的博客
07-06 3456
include(包含的组件缓存) 、 exclude(排除的组件不缓存，优先级大于include) 、max(最大缓存数，内部采用lru算法用于维护缓存列表)若用 keep-alive 包住A组件和B组件，从A组件跳转到B组件，在哪里更新B组件页面的数据？② exclude - 字符串或正则表达式，任何名称name匹配的组件都不会被缓存。，缓存的组件重新进入不会再触发created生命周期中的方法，因此数据不会更新。③ max - 缓存的最大个数（如果超过最大缓存个数，则移除最先缓存的组件）
vue中 keep-alive 理解以及使用
dachuichaobang的博客
04-22 1509
概念： keep-alive 是 Vue 的内置组件， 当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 和 transition 相似，keep-alive 是一个抽象组件： 它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 作用： 在组件切换过程中 把切换出去的组件保留在内存中， 防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性 原理：     在 created 函数...
#Vue2篇：keep-alive的属性和方法
...
03-10 864
组件是 Vue.js 内置的一个高阶组件，用于缓存其子组件，以提高组件的性能和响应速度。除了基本用法之外，它还提供了一些属性和方法，以便更好地控制缓存的组件。属性用于指定哪些组件应该被缓存，属性可以是一个字符串或正则表达式，用于匹配组件的名称； 属性用于指定哪些组件排除在缓存之外，属性也可以是一个字符串或正则表达式，用于排除特定的组件。 属性用于限制缓存的组件数量。当缓存的组件数量超过 max 值时，最早被缓存的组件将被删除。 :用于控制组件的缓存方式。如果指定了 key 属性，则会根据 key 值缓存组件
keep-alive如何使用
06-12
keep-alive 是 HTTP 协议中的一种机制，用于在客户端和服务器之间保持长连接，以减少每次请求的连接建立和关闭所带来的开销，从而提高性能。在 HTTP/1.1 中，keep-alive 是默认开启的，而在 HTTP/1.0 中需要显式地使用 Connection: keep-alive 来开启。 在前端开发中，我们可以通过设置 HTTP 请求的头部信息来启用 keep-alive，例如： ``` const requestOptions = { headers: { 'Connection': 'keep-alive' } }; fetch('https://www.example.com/', requestOptions); ``` 在后端开发中，服务器也需要支持 keep-alive，当客户端请求中包含 Connection: keep-alive 头部信息时，服务器会在响应中返回 Keep-Alive 头部信息，指示客户端可以继续使用当前的连接。 同时，服务器还可以通过设置 Keep-Alive 头部信息的参数来控制连接的超时时间、最大请求数等，例如： ``` Keep-Alive: timeout=5, max=100 ``` 这表示如果客户端在 5 秒内没有发送请求或响应，则服务器会关闭连接；同时，最多允许客户端发送 100 个请求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值