关于keep-alive的使用

最新推荐文章于 2025-04-29 19:21:30 发布
最新推荐文章于 2025-04-29 19:21:30 发布
阅读量342 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hejianop/article/details/84324355
博客介绍了Vue中使用keep-alive后，created和mouted仅调用一次，可使用activited初始化数据，但会出现脏数据问题。建议按需使用缓存，在路由配置参数keepAlive，默认不使用，需用时添加该参数，还给出相关生命周期参考文章链接。

使用keep-alive之后，created和mouted只会调用一次。

此时可以使用activited进行数据的初始化，不过使用这个之后打开其他的详情页面，因为缓存会导致页面上显示零点几秒的脏数据，具体时长和服务器响应有关。

所以修改成需要缓存的地方使用缓存，不需要缓存的时候不用缓存

在路由的时候配置参数keepAlive， 默认是false即不适用缓存，需要使用加上参数

 

相关生命周期 可以看下这个文章

https://blog.youkuaiyun.com/stubbor/article/details/73739765

hejianop
关注
vue列表页面缓存 keep-alive，列表跳转详情页面，列表页面缓存
高山景行，一尘不染
03-23 3202
A页面 B页面：列表页面 C页面：详情页面 需求A页面跳转B页面时，B页面需要加载最新数据；C页面跳转B页面时，B页面的数据是A页面跳转到B页面的数据 代码： router-view： <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <rout...
keep-alive 使用场景和原理
youhebuke225的博客
05-28 633
通过以上原理和使用场景的介绍，我们可以更好地理解和应用 Vue 的 keep-alive 组件来优化应用的性能和用户体验。
keep-alive
Zhoujia1316的博客
06-01 1139
keep-alive的概念 keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 作用 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性 参数 Keep-alive 组件提供了 include 和 exclude 两个属性，允许组件有条件的进行缓存。 include: 字符串或正则表达式。只有匹配的组件会被缓存。 exclude: 字符串或正则
keep-alive的使用
前端菜菜DayDayUp的博客
06-16 284
keep-alive属性： include - 字符
keep-alive 使用
weixin_41760500的博客
01-19 4780
一、基本使用 需求：有两个页面（A 和 B），当我们在页面A的table列表中点击查看详情按钮，跳转到B页面，在B页面点击返回时，要定位到之前A的列表位置， 不能刷新该页面。 在 <router-view /> 的外层包一个 keep-alive 如： <keep-alive include="pageA"> <router-view /> </keep-alive> 其中 include 为要缓存的页面，如果有多个页面可用逗号隔开，pageA为.
Nextjs-keep-alive-demo.rar
05-09
Nextjs-keep-alive 实现，vue中有这个专门的keep-alive插件，但是react没有，更别提nextjs了，这是现成的项目demo。 next9，10，11，12，13，14 及以上都可以用。直接使用或者移植到你的项目，非常方便。集成了发送...
vue组件 keep-alive 和 transition 使用详解
01-19
1.keep-alive 能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件...
keep-alive的介绍及使用
01-08
如果需要频繁切换路由，这个时候就可以考虑用keep-alive了，来达到避免数据的重复请求的目的 keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗。 简单一点来说就是从页面A链接到其他页面后回退到页面A...
彻底揭秘keep-alive原理(小结)
11-30
一、前言 ...本文介绍的内容包括： keep-alive用法：动态组件&vue-router keep-alive源码解析 keep-alive组件及其...使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 2.2 一个场景 用户在某
vue keep-alive请求数据的方法示例
08-27
但是，在使用 Keep-Alive 时，可能会遇到一些问题，例如请求数据的方法示例、keep-alive 属性的设置等。本篇文章将详细介绍 Vue Keep-Alive 请求数据的方法示例，并提供解决方案来解决 keep-alive 属性的设置问题。 ...
keep-alive简单使用
weixin_59787755的博客
01-06 588
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated。
keep-alive的使用及详解
weixin_38822843的博客
04-13 5642
keep-alive的使用及详解 作用：​在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。 ​
keep-alive具体使用方法
2202_75695913的博客
04-29 586
是 Vue.js 提供的一个内置组件，用于缓存动态组件实例，从而避免重复渲染已加载过的组件。它的主要功能是在切换组件时保留状态和 DOM 结构，提升性能。
proxy&keep_alive
weixin_40422539的博客
09-20 422
Object.defineProperty的缺点 深度监听需要一次性递归 无法监听新增属性/删除属性 无法原生监听数组，需要特殊处理 proxy基本使用 reflect返回布尔值判断是否成功 keep_alive keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 场景 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，我们希望：列
vue的keep-alive使用方法
最新发布
07-12
要使用 `keep-alive`，只需将需要缓存的组件包裹在 `<keep-alive>` 标签内即可。例如，在动态组件或路由组件中使用： ```html <keep-alive> </keep-alive> ``` 在这个例子中，`currentComponent` 是一个动态绑定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值