vue中使用keep-alive缓存页面后无法更新数据

最新推荐文章于 2024-05-17 11:40:43 发布
最新推荐文章于 2024-05-17 11:40:43 发布
阅读量1k 收藏 1
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hgh_1997/article/details/118519493
版权

比如一个商品列表，点击某个商品进行编辑，去到编辑页中进行操作，编辑完成后再次返回商品列表编辑的商品还未更新。
之前我们一般用mounted()或者created()进行初始化数据，keep-alive缓存后的组件只会执行一次mounted或者created的方法。


解决方案：使用activated去代替created或者mounted。

个人理解
activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等

迷失在广东的靓仔中了
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue数据更新，页面却没有更新的几种情况及解决方法
LFQP_的博客
03-27 2万+
Vue数据更新，页面却没有更新的几种情况及解决方法
vue项目中解决路由缓存组件不重新请求数据问题
^_^
07-20 1906
场景： 当点击个护标题时再点击严选标题时页面数据没有发生请求 当点击标题时只有我们通过<router-link to="${xx}"></router-link>的路由id变了，并没有去重新请求页面的变化，只有刷新页面后才会去请求当前id的数据，其实也是可以理解的， 对比一下这两个路由 只是后面路由的参数变了，但是组件并没有销毁在创建，你也可以理解为，当你手动在浏览器输入id值时，并没有点击回车键或搜索，浏览器就不会自动去搜索数据，总结出现的问题：路由地址变了，匹配的是同
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2使用keep-alive缓存多层列表页的方法
10-17
今天小编就为大家分享一篇vue2使用keep-alive缓存多层列表页的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue2 Vue3 keep-alive 使用、解决keep-alive缓存导致页面不刷新的问题
林中明月间丶
10-31 3078
<keep-alive exclude="Detail"> <router-view/> </keep-alive> activated () { if (this.lastCity !== this.city) { this.lastCity = this.city this.getHomeInfo() ...
vue3中keep-alive缓存,指向同一组件时数据不更新
weixin_50880237的博客
12-05 973
vue3中keep-alive缓存,指向同一组件时数据不更新
keep-alive 介绍及使用问题：多次使用同一组件，数据不更新
Jerry子辰的博客
05-12 1889
待写
vue缓存页面keepAlive的坑（数据不刷新，只缓存第一次进入的页面数据），强制刷新缓存的页面的方法
weixin_41308436的博客
11-18 6439
需求：A进入B，根据不同id刷新B页面数据，B进入C，C返回B，如果C有操作数据，则返回B后刷新B数据，否则B页面不刷新； 第一次尝试 *思路是从C进入B，缓存B，其他页面进入B，不缓存 B页面： beforeRouteLeave(to, from, next) { from.meta.keeplive= false; next(); }, activated(){ //根据$route.meta }, C页面 // 返回上一页路由不刷新问题 beforeRouteLeave
keep-alive
Zhoujia1316的博客
06-01 813
keep-alive的概念 keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 作用 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性 参数 Keep-alive 组件提供了 include 和 exclude 两个属性，允许组件有条件的进行缓存。 include: 字符串或正则表达式。只有匹配的组件会被缓存。 exclude: 字符串或正则
基于vue中keep-alive缓存问题的解决方法
01-19
但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id ...
vue中keep-alive内置组件缓存的实例代码
01-19
将要缓存的组件使用 keep-alive 包裹住即可。 keep-alive优点的介绍： 1. 切换组件时，当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。 2. 切换回来时，也不会重新创建。（既然都没有被销毁，哪里来的...
vue里如何主动销毁keep-alive缓存的组件
10-17
主要介绍了vue里如何主动销毁keep-alive缓存的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue的性能优化、mixin、keep-alive、set、extend、自定义指令、简单讲述 vuex、Vuex刷新页面数据丢失怎么解决？、双向数据绑定、多层父子组件通讯、对keep-alive的了
weixin_44423378的博客
03-23 219
Vue的性能优化、mixin、keep-alive、set、extend、自定义指令、简单讲述 vuex、Vuex刷新页面数据丢失怎么解决？、双向数据绑定、多层父子组件通讯、对keep-alive的了
vue中使用keep-alive缓存页面后 解决页面不刷新的问题 以及使用路由守卫后页面重复获取数据的问题
abcd123596的博客
08-31 6363
keep-alive
探索vue2框架的世界：vuex持久化，存储的数据刷新页面后导致数据丢失？
Code_King006的博客
04-07 1756
vuex中存储的数据，刷新页面后导致数据丢失的处理方式。
keep-alive，数据无法刷新的问题
代码青春
01-04 899
keep-alive 相关内容 概念：<keep-alive>是Vue的一个内部组件，适合用来缓存不需要实时更新的组件，这样可以保留组件状态避免重新渲染。 Props： include ：接受字符串或正则表达式，这里是需要被缓存的组件名 exclude ：接受字符串或正则表达式，这里是不需要缓存的组件名 max ：接受数字，最多可以缓存多少组件实例 问题： 在需要重新请求数据的时候，依然走的缓存 案例： 问题描述： 这个项目是一个后台管理系统，由于很多组件都有走缓存的...
keep-alive 缓存不更新问题
sxm的博客
08-11 603
使用keep-alive经常会遇见的需求，从a页面进入b页面时不需要缓存，b页面进入c页面时候，b页面需要缓存。1、首页我们需要在vuex中定义一个字段来判断是否需要缓存,字段为需要缓存的组件名。2、在app.vue中写上keep-alive，把用vuex中的字段控制是否缓存。3、在b页面上导航守卫上监听页面。...
HOW - Canvas 入门系列之基于vue-konva的多维表格（四）
最新发布
weixin_58540586的博客
05-17 1193
今天我们将将基于vue-konva 实现的一个表格渲染的组件。
vue中使用keep-alive缓存动态组件 为什页面滚动位置也一样
06-13
在 Vue 中使用 `keep-alive` 缓存动态组件时，同样会出现滚动位置相同的问题。这是因为使用 `keep-alive` 缓存动态组件时，缓存的是组件实例对象，也就是说，即使组件被缓存起来了，组件实例仍然存在，所以滚动位置...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值