vue性能优化之keep-alive

最新推荐文章于 2025-06-09 10:03:40 发布
最新推荐文章于 2025-06-09 10:03:40 发布
阅读量1.2k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35401191/article/details/83011265
本文详细解析了Vue.js中Keep-Alive组件的工作原理及其如何通过缓存提高应用性能。Keep-Alive能够避免组件重复渲染，减少Ajax请求，从而提升用户体验。同时介绍了如何利用activated钩子函数在组件激活时执行特定操作，以及如何排除不希望缓存的组件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

路由被切换的时候会重新发送ajax请求。mounted钩子函数会被重新执行

vue自带标签 kepp-alvie  

keep-alvie  ：

路由内容加载一次后，就把路由内容放在内存中（相当于cookie），下次加载的时候就不用发送ajax请求了

当我们需要重新发送ajax请求时 

当我们使用keep-alvie 时候 组件会多一个钩子函数  activaed

activaed（）{}

钩子函数会在页面重新显示的时候执行。

我们可也可以在keep-alive 标签中添加 exclude（添加对应的组件名）

深入探讨文章

https://segmentfault.com/a/1190000015845117

 

 

详细说说vue里面的kepp-alive的底层实现
weixin_40682342的博客
05-29 406
在 Vue 源码的中定义keep-alive使用抽象组件特性，不渲染自身 DOM维护一个缓存对象存储组件实例实现 LRU 缓存淘汰策略特殊处理组件的激活/停用生命周期与 Vue 的虚拟 DOM 系统深度集成这种实现方式既保证了组件的状态保留，又避免了不必要的性能开销，是 Vue 性能优化的重要特性之一。
深入理解与应用Keepalive机制
Miraitowa_xu的博客
03-17 2044
一、VRRP协议（一）VRRP概述1.诞生背景终端设备访问不同网段设备的时候，必须经过网关。如果只有1个网关，那么网络就存在 单点故障，所以为了避免单点故障导致网络的通信中断， 所以，我们建议在一个网段中，可以同时添加多个网关，从而增加网关的冗余性和网络的可靠性；但是，多网关的部署会带来其他的问题：1.网关IP地址冲突2.终端用户需要频繁的切换网关IP地址针对上述两个问题，提出了：在同网段的多个网关之间运行VRRP，形成1个虚拟网关，终端用户都配置和使用虚拟网关就可以了。
深入解析vue的keep-alive缓存机制
最新发布
鹏多多的博客
06-09 1345
Vue的keep-alive组件是一个内置的抽象缓存容器，能够保留包裹组件的状态，避免重复渲染。它通过activated和deactivated钩子管理组件生命周期，支持include/exclude属性精准控制缓存范围，以及max属性限制缓存数量。常见应用场景包括路由状态持久化和动态组件切换。底层通过cache对象存储组件实例，采用LRU策略淘汰缓存。最佳实践包括结合路由元信息动态管理缓存、避免过度缓存以及在activated钩子处理数据刷新。注意需为组件设置name属性，且缓存组件不会触发mounted
前端性能优化之vue-keepAlive
lxs19930928的博客
12-04 568
（一):普通组件缓存三种写法 <!-- 组件缓存的第一种写法: 字符串逗号分隔符--> <!-- <keep-alive include="ComA"> <componnet :is="status"></componnet> </keep-alive> --> <!-- 组件缓存的第二种写法:正则表达式的写法 // --> <!-- <keep-alive
vue:使用keep-alive提升性能
手写我对你的温柔
02-03 441
不使用keep-alive时候： 第一次进入首页 发起一次后台请求接口 第一次跳转，也第一次发起请求 关键来了， 当按下返回键，返回到上一个单文件组件的时候，又请求了一次接口： 2个页面的反复跳转： 可以看到有时候这是十分没有必要的。 本案例发生的原因是首页组件每一次路由重新切换到该组件的时候，首页组件都会重新渲染， 钩子mounted会重新执行 所以就会获取...
keep-alive性能优化
zengfu123的博客
12-18 709
最近项目的需求一直在动，1.产品：切换页面不要重新刷新数据（相关数据量太大，每次加载页面数据都要两到三秒） 解决方案：使用vue的keep-alive相关组件此时发现页面会镜像缓存，但是确失去了自动更新的所有可能性，比如详情页面会出现再次跳转仍是以前数据的问题； 此时产品再次需求：切换详情的时候数据要及时的更新到最新；此时发现keep-alive配套监控满足此时的需要：actived；但是使用时发现他和created有时会同时发生，这是自己做好相关标识阻断调用以提升页面加载性能； 此时...
Vue高级特性 KeepAlive（常见性能优化） 缓存或者提升性能时用
weixin_48908498的博客
02-14 577
Vue高级特性 KeepAlive
vue组件 keep-alive 和 transition 使用详解
01-19
1.keep-alive 能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件...
vue中keep-alive内置组件缓存的实例代码
01-19
将要缓存的组件使用 keep-alive 包裹住即可。 keep-alive优点的介绍： 1. 切换组件时，当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。 2. 切换回来时，也不会重新创建。（既然都没有被销毁，哪里来的...
vue keep-alive请求数据的方法示例
08-27
Vue Keep-Alive 是 Vue 框架中的一个功能强大且实用的机制，可以缓存组件的状态，减少不必要的组件重渲染，提高应用程序的性能。但是，在使用 Keep-Alive 时，可能会遇到一些问题，例如请求数据的方法示例、keep-...
深入理解vue-router之keep-alive
12-09
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 用法也很简单： <keep> <!-- 该组件将被缓存！ --> </keep> props include – 字符串或正则表达，只有匹配的组件会...
vue里如何主动销毁keep-alive缓存的组件
10-17
在Vue.js框架中，`keep-alive`是用于缓存组件状态的一个功能，它可以保持组件状态，避免重新渲染，提高应用性能。然而，在某些场景下，我们需要在组件不再可见时主动销毁它，以避免内存泄漏或资源浪费。本文将详细...
vue中使用keep-alive来优化网页性能
一起学习呀
02-20 253
作用：每次切换到某个组件的时候，该组件的mounted钩子函数都会执行，结果就是每次都会发ajax请求，浪费性能。为了解决这个问题，使用keep-alive可以在第二次切换组件的时候使用缓存数据，不会再重新发送ajax请求。 使用步骤： step1 step2 如果按照第一步来，会出现问题，如果该组件的内容要改变，要重新发ajax请求，那怎么办？ 解决办法：使用activated(）这个keep-alive自带的钩子函数，当组件内容改变的时候，就可以重新发送ajax请求。 ...
vue 高级特性keepalive
qq_37550440的博客
02-07 297
缓存组件keep-alive，频繁切换，但不重复渲染，使用场景tab切换等，性能优化的场景之一 可以在控制台看log 的输出情况 <template> <!-- rights组件 --> <div> <button @click="show='a'">a</button> <button @click="show='b'">b</button> <!-- 切换时会一直触发多次..
keep-alive
weixin_33695082的博客
06-03 164
1、什么是Keep-Alive模式？我们知道HTTP协议采用“请求-应答”模式，当使用普通模式，即非KeepAlive模式时，每个请求/应答客户和服务器都要新建一个连接，完成之后立即断开连接（HTTP协议为无连接的协议）；当使用Keep-Alive模式（又称持久连接、连接重用）时，Keep-Alive功能使客户端到服务器端的连接持续有效，当出现对服务器的后继请求时，Keep-...
什么是keep-alive？
青山不改，绿水长流。
09-22 1457
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。activated 当组件被激活（使用）的时候触发 可以简单理解为进入这个页面的时候触发。deactivated 当组件不被使用的时候触发 可以简单理解为离开这个页面的时候触发。
keep-alive优化网页性能
王依米
11-22 663
每次当点击城市页面的按钮跳转到首页都会请求一次数据，这就造成了性能低， 我们在app.vue里面给 显示的内容包上 keep-alive city.json就不会重新加载了. 2、每次点击城市取对应的数据渲染到首页,在home.vue里请求数据json数据要加上参数  ?city= 在vuex里存的城市参数 然后刷新网页.城市参数已经请求过来 城市切换过来了,首页里的内容也要跟...
vue基础之keep-alvie保持历史页面数据不变，切换页面后数据不变keep-alvie
tangdou369098655的博客
05-10 962
1：路由配置文件设置 { path: '/MenuM', component: Layout, redirect: '/MenuM', children: [ { path: 'MenuM', name: 'MenuM', component: () => import('@/views/MenuM'), meta: { title: '主界面', icon:
keep-alive 的详细介绍
wang12345111的博客
10-07 3000
1.keep-alive 了解 keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 。 2.keep-alive的运用 如图所示:给你的视图标签外套一个keep-alive标签就实现了组件的缓存 3. keep-alive的include和exclude属性 上图中是所有组件都实现缓存，那么我们要实现指定组件缓存就需要用到include和exclude这两个属性了 如图所示 include所绑定的Home组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值