Keep-alive的理解

已于 2022-10-24 15:44:36 修改
阅读量169 收藏
点赞数
文章标签： 缓存 1024程序员节
于 2022-10-24 15:44:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73738273/article/details/127444063
版权

keep-alive是一个内置组件，作用是缓存不活动的组件不被销毁，下次访问这个组件的时候不会重新加载而是从缓存里去拿。

比如说刚填好的表单需要缓存，还有保持滚动条的距离

keep-alive的黑白名单：可以用include和exclude规定缓存谁不缓存谁也可以使用路由的元信息定义

跟他相关的两个钩子函数的actived和deactived

举例：保持滚动条的距离：

给router-view外层套一个keep-alive

在想要保持滚动条的页面的beforeRouteLeave的时候拿到当前滚动条的距离

在actived里面赋值给页面的滚动条

拿滚动条或者赋值滚动条都是document.documentElement.scrollTop

从不敲代码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
深入理解vue-router之keep-alive
12-09
本文基于 Vue2.0 keep-alive 简介 keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 用法也很简单： <keep> <component> <!-- 该组件将被缓存！ --> </component> </keep> props include – 字符串或正则表达，只有匹配的组件会被缓存 exclude – 字符串或正则表达式，任何匹配的组件都不会被缓存 // 组件 a export default { name: 'a', data () { return {} } }
对 keep-alive 的理解，使用场景以及存在的问题
小草莓的博客
07-06 3699
include(包含的组件缓存) 、 exclude(排除的组件不缓存，优先级大于include) 、max(最大缓存数，内部采用lru算法用于维护缓存列表)若用 keep-alive 包住A组件和B组件，从A组件跳转到B组件，在哪里更新B组件页面的数据？② exclude - 字符串或正则表达式，任何名称name匹配的组件都不会被缓存。，缓存的组件重新进入不会再触发created生命周期中的方法，因此数据不会更新。③ max - 缓存的最大个数（如果超过最大缓存个数，则移除最先缓存的组件）
keep-alive的理解
qq_39639537的博客
11-24 483
1、keep-alive是Vue.js的一个内置组件。vuevue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗。 2、它有两个生命周期： activated: keep-alive组件激活时调用 deactivated: keep-alive组件停用时调用 它提供了include与exclude两个属性，允许组件有条件地进行缓存 3、示例： <!-- keep-alive代码可以结合v-if进行包裹，如果meta中的keepAlive为true进行缓存，否
谈谈keep-alive的理解
weixin_54189624的博客
12-29 83
列表页进入详情页，如果在列表页点击的都是相同的 ，详情页就不用请求多次了，直接缓存起来就行了，如果点击的不同，则需要重新请求数据。keep-alive是系统自带的一个组件，用来缓存组件，避免多次加载相同的组件，减少性能消耗，提高用户体验。keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。include - 字符串或正则表达式。只有名称匹配的组件会被缓存。最多可以缓存多少组件实例。
说说你对keep-alive的理解是什么？
Web_boom的博客
02-23 453
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
对于keep-alive的理解
weixin_54167313的博客
06-01 941
介绍 keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，一个路由在切换时会被销毁，之前的数据全部丢失，下次再访问这个组件时，需要重新创建，重新调接口，重新渲染，为了提高性能我们可以使用 keep-alive 把组件缓存起来，这样在组件切换时，这个组件并没有被销毁，下次访问时，可以就可以显示出来，而且原组件中数据还在。 把需要缓存的组件使用 keep-alive 套起来即可。比如：把所有路由页面都缓存起来，在切换时不销毁： <keep-ali
了解keep-alive
yrxnnn的博客
12-29 587
1.什么是keep-alive keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 2.keep-alive的作用 在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性 3.keep-alive的生命周期函数 被包含在keep-alive中创建的组件，会多出两个生命周期来的两个钩子函数：activate
深入理解Vue keep-alive及实践总结
10-16
主要介绍了深入理解Vue keep-alive及实践总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue中keep-alive组件的深入理解
10-14
主要给大家介绍了关于Vue中keep-alive组件的深入理解，文中通过实例代码结束的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
（34）：keep-alive的理解
weixin_46511008的博客
11-01 465
对keep-alive的理解 一、Keep-alive 是什么 1、keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM 2、keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们 3、keep-alive可以设置以下props属性： （1）include - 字符串或正则表达式。只有名称匹配的组件会被缓存 （2）exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存 （3）max - 数字。最多可以缓存多少组件实例
keep-alive理解
Clover ‘s Blog
05-29 574
vue
谈谈我对keep-alive的理解
come_and_play的博客
06-29 87
KeepAlive> 默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude prop 来定制该行为。1、 在组件切换时，就会出现新组件的创建和旧组件的销毁。它会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项。2、<keep-alive> ：是用来缓存组件的，包裹在<keep-alive>里的组件不会被销毁。4、<keep-alive> 的两个属性：include和exclude。
谈谈你对 Vue 中 keep-alive 的理解
weixin_62992614的博客
06-02 115
当组件失去焦点时，Vue通常会销毁该组件并释放其内存，在该组件再次获取焦点时，需要重新初始化和渲染该组件，并可能丢失之前的数据状态。而使用keep-alive后，组件会被缓存到内存中，当组件再次获取焦点时，只需要从内存中读取该组件的缓存实例即可，当然，之前的状态和数据也就得以保留下来。值得一提的是，keep-alive只适用于需要频繁切换的组件，否则，适得其反。由于已经被渲染过的组件会被缓存起来，下一次需要渲染时，组件的状态和数据都已经存在于实例中，不需要重新初始化，因此可以节省不少的渲染时间。
LOTO示波器软件PC缓存(波形录制与回放)功能
LOTO2018的博客
05-13 683
比如说，我们一次采集的整个缓存，也就是一个数据帧的数据是175毫秒的时间段的波形，但是我们时间档位选择了5毫秒，一屏幕有10个横向的格子，那么就是说一屏幕显示的是5X10=50毫秒的数据波形。如下图所示，由于设定了PC缓存的帧数量，开启后，PC缓存会存满设定数量的数据帧，并且按先入先出的原则，新采集到的数据帧会进来顶掉最早进来的那个数据帧，保持设定帧数量的PC缓存。需要注意的是，波形文件的导出和导入，不仅仅是波形数据的存储和回读，还包含着示波器的各种设置参数的保存和恢复。不过都可以在如下箭头位置勾选打开。
java中实现缓存的几种方式
最新发布
shenxiaomo1688的博客
05-16 510
Redis 是C语言开发的一个开源高性能键值对的内存数据库，可以用来做数据库、缓存、消息中间件等场景，是一种NoSQL(not-only sql,非关系型数据库)的数据库。下面我们介绍在springboot项目中的使用springboot中有redis的starter我们直接引用即可然后在spring配置文件中加入如下设置，这里用的是properties形式的文件，host是部署redis的服务器ip，port是端口号，password是密码，如果没有设置密码不填即可同样我们编写接口测试。
js-vue页面路由跳转（存入缓存）-多个复杂循环跳转返回
2301_76671906的博客
05-10 487
vue页面路由跳转（存入缓存）-多个复杂循环跳转返回， 利用sessionStorage缓存跳转前的路径。每一次进行跳转时进行缓存当前的路径。在进行需要返回时取出最新的路径，并从缓存中进行删除，进行对应的跳转返回。
【问题解决】关于pip缓存，HUggingface缓存，HUggingface无法正常下载的问题解决
专注于人工智能的算法与应用
05-11 925
第一个问题我在安装的pip install torch的时候，出现了C盘磁盘空间不够的问题但是我的环境明明在E盘啊，给我整不会了！！！后来发现是因为缓存的问题感觉理解缓存相关机制可以更好debug~先来回答缓存在哪里。
缓存不经常更新的动态信息：策略与 Nginx 配置指南
u010260632的博客
05-13 911
在处理不经常更新的动态信息时，合理配置缓存能够显著提高网站的性能和用户体验。通过缓存这类内容，我们可以减少对后端服务的请求压力，加快内容的加载速度。下面我们会探讨如何在 Nginx 中配置缓存以最大化这种类型的动态内容的效益。
Redis缓存双删（使用Redis如何保证数据库和缓存之间的同步）
qq_40929531的博客
05-13 310
该策略的问题是，如果Redis 修改成功了，数据库没有修改成功，导致数据不一致。：该策略的问题是如果数据库更新成功了Redis 修改失败了，也会导致不同步的问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值