Vue页面切换后，内存未释放（通过缓存路由来解决）

最新推荐文章于 2024-11-21 11:17:09 发布
最新推荐文章于 2024-11-21 11:17:09 发布
阅读量9.3k 收藏 7
点赞数 3
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43747076/article/details/106335903
版权
本文详细探讨了Vue中的keep-alive组件，用于在页面切换时保持组件状态，避免DOM的重复渲染。讲解了三种路由缓存策略：缓存所有路由、指定路由缓存以及在多路由场景下如何选择性缓存部分路由，帮助开发者优化应用性能。
摘要由CSDN通过智能技术生成

keep-alive详解：

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

与 相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在父组件链中存在，比如：你永远在 this.$parent 中找不到 keep-alive 。

第一种：缓存所有路由

<keep-alive>
	<router-view></router-view>
</keep-alive>
最低0.47元/天 解锁文章
vue切换路由页面数据缓存_关于VUE路由跳转的缓存问题
weixin_39746241的博客
02-05 2510
由于自己是刚学的vue，所以对vue挺多不解的问题。希望各位码友能够指出我的不对，或者给我更好的建议。关于项目最近在做一个项目，整个项目是由vue+vue-router+vue-cli+webpack+mui+H5 plus+ 构建的一个混合开发项目。通过Hbuilder打包成APK。原本项目是直接在Hbuilder开发的，使用的也是Hbuilder自动生成的框架。后来想把项目重构。所以才有机会学...
vue单页面内存无法释放_通过 Laravel 创建一个 Vue 单页面应用（二）
weixin_33977572的博客
01-22 876
在这个教程中，我们通过学习怎样从 Vue 组件中的 Laravel API 加载异步数据，来继续在 Laravel 中创建一个 Vue 单页应用（SPA）。我们也会看看相关的错误处理，比如当 API 返回错误，接口如何响应。如果你没有学习第一部分，我们通过 Vue Router 和 Laravel 后端组建的 Vue 单页应用（SPA）。如果你想继续跟着学习的话，你应该先去完整地学习一下第一部分...
vue中路由缓存
wch19960518的博客
11-21 850
vue路由缓存
vue单页应用的内存泄露定位和修复问题小结
10-16
系统进程不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。这篇文章主要介绍了vue单页应用的内存泄露定位和修复,需要的朋友可以参考下
vue路由切换内存不释放
john先生
01-13 5249
vue app 内存泄漏
vue路由切换 内存不释放
weixin_42596011的博客
01-06 2066
Vue.js 是一个 JavaScript 库，用于构建用户界面。Vue.js 中的路由功能可以帮助开发人员创建单页应用程序，其中不同的 URL 对应不同的内容。 如果你在使用 Vue.js 路由时发现内存不会释放，那么可能有以下原因： 你的应用程序中存在内存泄漏。内存泄漏指的是应用程序中的内存在不需要时无法被回收，导致内存占用越来越多。可以使用工具如 Chrome 开发者工具的内存分析功能来查...
vue 刷新页面所占用的内存没有被释放，刷新页面增加内存的问题（重要）
热门推荐
PrimaryColor
09-24 1万+
场景： 在vue项目正常情况，我们都知道开启的定时器setInterval、监听器watch、eventBus事件总线监听器、以及一些其他外部js的监听器，需要在beforeDestroy中卸载。如果没有进行卸载，那么他们相关回调函数使用的变量，就不会被卸载，最后很有可能会造成内存泄露的问题，也就是在这个页面一直访问，最后内存占满之后页面直接崩溃了。 但有的时候我们在beforeDestroy也对这些定时器监听器什么的进行了卸载删除，但是刷新页面之后内存还是一直增加，只有关闭页面内存才真正被释放了。
vue路由切换内存不释放_Js造成内存泄漏和回收
weixin_39727402的博客
12-05 7622
js中的内存垃圾回收机制：垃圾回收器会定期扫描内存，当某个内存中的值被引用为零时就会将其回收。Vue单页面应用中：Web App 与 传统Web的区别，因为Web App是单页面应用页面通过路由跳转不会刷新页面，导致内存泄漏不断堆积，导致页面卡顿。比如Jquery 中的on 函数 vue 组件实例的 $on 函数第三方库中的初始化函数websocket 实例的on 函数使用render 函数，避免...
Vue 路由切换时页面内容没有重新加载的解决方法
10-18
在使用Vue.js开发单页应用程序（SPA）时，页面组件在路由切换时通常会重新渲染以显示新的内容。但有时候，用户可能会遇到路由切换时页面内容没有更新的问题。这通常与Vue的生命周期钩子函数和keep-alive组件使用不当...
vue Tab切换以及缓存页面处理的几种方式
10-16
Tab切换允许用户在不同的页面或模块之间进行切换，而页面缓存则能够使得切换后的页面保持之前的页面状态，比如填写的表单信息和查询出的数据列表，而不是每次切换都重新加载，这样可以提高用户体验和页面性能。...
详解vue-template-admin三级路由无法缓存的解决方案
11-21
总之，解决vue-template-admin三级路由无法缓存的问题需要理解`keep-alive`的工作原理，以及如何通过路由的`matched`属性来控制缓存。同时，如果路由结构允许，适当调整路由设计也可以简化缓存管理，提高应用性能。
一个Vue页面的内存泄露分析
weixin_34381687的博客
06-24 1985
什么是内存泄露？内存泄露是指new了一块内存，但无法被释放或者被垃圾回收。new了一个对象之后，它申请占用了一块堆内存，当把这个对象指针置为null时或者离开作用域导致被销毁，那么这块内存没有人引用它了在JS里面就会被自动垃圾回收。但是如果这个对象指针没有被置为null，且代码里面没办法再获取到这个对象指针了，就会导致无法释放掉它指向的内存，也就是说发生了内存泄露。为什么代码里面会拿不到这个对象指...
关于IE的内存回收机制 和 vue在ie上tab页关闭内存不释放问题的尝试与思考
Black____White的博客
09-22 2669
最近接手一个有后端搭建的前端项目，去收拾烂摊子。让我来优化该页面在ie上的白屏问题 首先我看代码 代码结构是keepalive + element的tab插件 + menu插件 做的一个菜单点击，tab标签弹出展示项目。 首先进来将element等一些组件改成按需引入 一些iframe在离开页面时需关闭。 一些v-if等的处理 后面想去解决白屏时发现 这后端keepalive的include属性做的是个假的，也就是这个后端写了个假的动态缓存组件，没有半点用（真不知道这玩意是怎么上线的）、没办法，...
如何看内存占用情况，vue反复刷新标签页导致面内存一直在涨，系统反应越来越慢，内存占用4个g。
菜鸡的博客
04-08 1万+
如何看内存占用情况，vue反复刷新标签页导致面内存一直在涨，系统反应越来越慢，内存占用4个g。
vue-router切换，组件不销毁
samll_redhat的博客
01-14 1万+
需求：后台管理系统，切换菜单时需要一部分页面刷新，一部分不刷新（其实就是组件销毁问题） 首先，我们需要在router-view标签外再包上一层标签keep-alive <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> &...
vue 路由带参数跳转，页面有缓存,问题的解决方法
aiiit的博客
12-06 4588
一.vue 路由带参数跳转，页面有缓存,问题的解决方法 a.从mv点击到mv详情页，第一次是没有问题的，返回列表再次选择一个不同的mv点击详情，数据还是第一次的数据 <template> <div @click="mvHandle(item.id)"></div> </template> <script> export default { name:'MvList', data(){ return{ } }, met
vue-router 切换tab标签关闭时缓存问题方案
hlvy
09-11 1万+
在router入口页面加上 keepAlive: true // 需要被缓存  false则不需要 { path: 'fundProListG', component: resolve =&gt; require(['@/pages/product/fundPros/fundTab/fundTab.vue'], resolve), ...
【vue】tab切换保留修改的内容，深拷贝缓存数据
花椒和蕊的博客
08-25 1552
第一种想法是vuex，把c的列表数据存下来，每次切到b的时候就保存，然后切到c调接口获取c列表数据那里进行比对，根据某个相同的字段或者特定的条件，比如vuex的c列表和调接口获取的c列表的某个字段是唯一的，比如code，然后将vuex里的行内弹窗数据复制给调接口获取的c列表的行内弹窗，考虑到只有单独的页面有这个需求，在vuex中保存有点大材小用，主要是太麻烦。b和c的关联是b页面列表填完数据后，切换到c的时候会调接口处理成另一种格式的列表，并且在c页面会根据某些条件需要填写行内弹窗。...
vue切换路由后缓存原始页面
最新发布
11-23
在Vue.js中，当你使用`vue-router`管理路由并希望避免在切换路由后刷新当前页面内容时，可以利用组件的`keep-alive`特性来进行页面缓存。`keep-alive`是一个特殊的属性，当设置在一个组件上时，Vue会缓存该组件及其所有子组件，直到该组件从视图中被移除，并再次通过相同的路由规则进入视图。 例如，在路由配置文件`router.js`中，你可以这样做： ```javascript { path: '/example', component: () => import('./Example.vue'), meta: { keepAlive: true }, } ``` 然后在需要缓存的组件`Example.vue`中，你可以手动清除缓存数据，如果不需要的话： ```javascript beforeDestroy() { // 清理之前的数据或资源 this.data = null; } ``` 这样，用户再次访问这个路由时，组件的状态将保持不变，就像从未离开过一样。然而，这并不适用于所有场景，比如用户登录状态改变、API数据更新等情况下，通常需要清除缓存。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值