vue keep-alive 使用中频繁点击导致数据丢失问题

最新推荐文章于 2024-05-15 16:50:47 发布
最新推荐文章于 2024-05-15 16:50:47 发布
阅读量1.1k 收藏
点赞数
分类专栏： web 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/supming1/article/details/90410736
版权

频繁点击，使使用了keep-alive的元素，接口调用被放弃，但状态被保存下来了，再次切换回来的时候数据又没有重新请求数据，导致页面没有数据展示。

思考：1、在activated生命周期重新拉取数据，但控制起来较为麻烦，最终放弃这种思路。2、限制频繁点击，实现起来比较简单，只要loading时间合适，即使不是接口返回，loading就消失，也不会对用户体验造成太大影响

解决方案：采用loading限制频繁点击

 

supming1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【keep-alive失效问题】使用Vue的keep-alive缓存前一个页面查询条件失效问题
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
05-06 1084
今天遇见一个问题，就是需要在多个tab页面之间切换的时候，需要保留之前tab页面的查询条件。例如：在前一个A页面输入了一些查询条件后，切换到另一个B页面时候，再次切换到A页面，发现A页面的查询条件会被重置，不会被缓存。 （1）问题描述 问题是这样的，我写了一个【A.vue】页面，在【activited()】钩子函数里面调用查询后端数据的方法，然后在后台系统里面切换路由页签的时候，返回到【A.vue】页面，发现每次切换回【A.vue】页面，这个页面之前的查询条件都会被重置，并且重新查询数据。 这里说的t
vue keep-alive请求数据的方法示例
08-27
但是，在使用 Keep-Alive 时，可能会遇到一些问题，例如请求数据的方法示例、keep-alive 属性的设置等。本篇文章将详细介绍 Vue Keep-Alive 请求数据的方法示例，并提供解决方案来解决 keep-alive 属性的设置问题。 ...
vue页面缓存后，切换菜单时页面数据显示错误
qq_44842962的博客
02-16 471
问题:页面是一个具有筛选功能的报表详情页，对报表进行筛选后，切换菜单显示别的页面后，再次回到报表详情页后，页面显示初次进入页面时的数据，不是筛选后的数据 原因:进入详情页时使用了query路由传参，多次切换菜单后，再次进入详情页，可能导致参数丢失，生成了两个报表详情页的缓存，所以偶尔会显示页面数据错乱 解决办法:把路由跳转改成params不使用query，即可
vue3项目 keepAlive 导致的切换tab页问题
最新发布
jiangchenW的博客
05-15 268
今天开发项目过程中发现，打开多个tab详情页后，详情页之间互相切换，数据没有刷新。查看控制台，发现详情页tab之间互相切换时，onActivated钩子函数只运行了一次，后续也并没有发送相应的请求。猜想：可能是keepAlive将详情页（同一个组件，路由带的query不同）都视作同一个组件了，所以在详情页之间切换，组件一直都是出于激活状态，只在第一次会调用onActivated钩子函数。此时，我发现，在其他页面和详情页互相切换时，onActivated钩子函数被成功调用了。果然，默认的组件名作为区分。
使用vue中缓存数据keep-alive时遇到的坑--------
nwj0106的博客
12-08 443
1.首先来说这个东西的好处，针对于缓存数据，keep-alive确实好用，例如，路由跳转(从列表页跳到具体某一项的详情页)，在路由返回的时候，可以把上一个列表页输入的数据缓存下来，进而达到目的，其次还可以利用keep-alive的专属函数actived函数去进行操作，相当于第二次进来列表页的时候不回去执行created和mounted，直接去执行了actived函数，然后你可以在这个函数里进行你想要进行的操作。 下面来说一下具体的坑，，，，， 目前只遇到过一个方面的，就是list页中table的header
【bug】【vue】页面切换keep-alive导致的数据问题
lorogy的博客
12-10 1521
问题描述 每个页面通过computed和watch监测vuex参数，在参数变化时请求ajax更新数据。 在公共组件改变参数时，所有页面都会去重新请求数据，当前页面根据数据重新渲染，但切换回其他页面时，由于keepalive，页面没有变化。 解决方法一 第一步：判断此时路由是否是当前页面，避免多余的数据请求，只有当前页面重新请求数据 watch: { classes(val) { if(...
Vue ＜keep-alive＞踩坑与解决记录
japlus的博客
02-09 1531
使用vue的keep-alive 可以缓存加载的组件 keep-alive存在的问题 假设有下面若干tab [ tab1 tab2 tab3 ] 三个tab通过<keep-alive><router-view/></keep-alive>切换 若：tab1未加载完成时，切换tab2 则： tab1中的异步代码仍会继续执行，如果有获取dom元素的代码（包括this.$refs）则会获取不到。 由于keep-alive原因，vuex变量变化 ==&...
Vue匿名组件使用keep-alive后动态清除缓存
热门推荐
weixin_55894946的博客
04-24 3万+
不过在这之前我们还得解决一个问题，由于此方法是拦截了路由离开事件，而当我们关闭不是当前激活的标签页时是不会触发路由离开事件的，这就会导致清除该缓存失效，所以我们得在关闭不激活的标签页时先模拟一次点击事件才能达到预期的效果。有了include和exclude对组件进行筛选，然后动态的记录tabs中打开的组件名，这就完美的解决了动态缓存的问题。但是，在项目开发中，为了提升页面加载的速度，一般会采用路由懒加载的方式加载路由组件，这时调用的组件不再是通过组件名，而是匿名组件。来缓存组件内部状态，避免重新渲染。
vue keep-alive使用，多标签保留缓存，刷新、删除、复制标签，缓存销毁，缓存爆栈解决
weixin_41072232的博客
06-03 4248
目标 页面打开记录展示在页面头部，每个标签都会保留上一次的操作缓存 头部标签支持删除，刷新，复制 同一个页面（表单的编辑）生成多个标签时每个都能保留独立缓存 方案 保留缓存，使用keep-alive来实现缓存，两种使用方式 // 第一种 <keep-alive> <router-view v-if="$route.meta.keepAlive" :key="$route.meta.timeKey"></router-view> </keep-alive&g
keep-alive true/false 无法显示页面问题
qq_38648382的博客
03-24 551
当路由设置keepAlive ：true时页面正常显示，但是为false的时候却不渲染，什么都没有 也不报错。是用在其一个直属的子组件被开关的情形。如果有上述的多个条件性的子元素，查看官网api 发现下面这句话（注意，要求同时只有一个子元素被渲染。
解决vue keep-alive 数据更新的问题
12-01
然而，在实际使用中，`<keep-alive>`可能会引发一些数据更新的问题，尤其是在涉及到数据获取和组件生命周期时。本文将详细探讨这个问题，并提供解决方案。 首先，我们需要了解`<keep-alive>`的工作原理。当一个组件...
vue组件 keep-alive 和 transition 使用详解
01-19
1.keep-alive 能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件...
基于vue中keep-alive缓存问题的解决方法
01-19
但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id ...
vue中keep-alive的用法及问题描述
12-29
在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省...
关于vue3刷新页面后，数据丢失问题
SeverusYang的博客
06-12 3555
一开始解决，思路大概是将数据存储到piniaStore中，但是interesting，刷新页面Store照样清空刷新，它并不是一个永久存在的仓库。本文重点解决刷新页面数据丢失的问题，一般情况下，调试过程中，数据会变空；这对于敏感信息如用户的登录状态和访问令牌是很重要的，因为它们应该在用户结束会话后立即失效。这使得它适合存储持久化的数据，如用户的偏好设置和本地缓存的数据，以便在用户下次访问网站时仍然可用。对于服务器返回的用户登录信息（用户名、密码、token等），一般建议将敏感信息存储在客户端的。
keep-alive 缓存页面不生效的三种原因
weixin_49336005的博客
09-07 1万+
Keep-Alive不生效的三种原因及解决办法
vue-element-admin 关于页面 keep alive 失效输入内容丢失
卡农的魔笛
02-29 1402
这个问题，一定要保持 name 的一致性。这个name，和文件名无关，只和 router 配置有关系。 看代码，路由配置： { path: 'ProductList', component: () => import('@/views/erp/ProductList'), name: 'ErpProductList...
【原创】vue中使用keepAlive组件缓存失效
a3335581的博客
03-11 1万+
项目开发中在用户从菜单列表页(List)进入详情页(Detail)需保存List的《当前页数、每页条数......》状态。 因此使用了keep-alive组件，原始代码如下，需要缓存的页面设置meta.KeepAlive为true。 &lt;keep-alive v-if="$route.meta.KeepAlive"&gt; &lt;router-view/&gt; &lt;/ke...
vue keep-alive缓存数据
04-05
Vue 的 keep-alive 组件可以缓存组件的状态或数据，使得在组件被销毁后再次访问时，能够快速的恢复之前的状态或数据，提升用户的体验。 keep-alive 组件可以包裹动态组件，并且通过设置 include 和 exclude 属性来控制缓存哪些组件，哪些组件不缓存。 在被缓存的组件中，可以通过 activated 和 deactivated 生命周期钩子函数来控制组件的状态和数据的恢复和清除。 例如，可以在 activated 钩子函数中重新获取数据，而在 deactivated 钩子函数中清除数据，这样就可以在组件被缓存和恢复时，控制数据的正确性。 另外，keep-alive 组件还提供了一个名为 max 的属性，用于控制缓存的最大组件数量，当缓存的组件数量超过 max 时，最早缓存的组件将被销毁，以释放内存。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值