使用keep-alive优化页面

最新推荐文章于 2023-12-01 16:24:51 发布
最新推荐文章于 2023-12-01 16:24:51 发布
阅读量165 收藏
点赞数
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42729843/article/details/104540754
版权

在使用vue-router切换页面时，在mounted钩子函数中请求axios数据会造成一个现象：从一个页面切换出去再回来时会重复请求数据（每次切换页面axios都会被发送）。这是可以使用keep-alive优化页面

这样表示路由中的内容被加载过一次以后就会放到内存中，当再切换到这个页面是不会再重新渲染这个组件，重新执行钩子函数的，直接读取内存中的的内容显示页面。

如果在keep-alive的环境下需要在切换页面时重新调用的钩子函数，可以使用actived

彭yanyan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
路由缓存 keep-alive
汤迷的博客
03-29 1148
备注1 ：keep-alive include 生效条件 1、include 里面的 name 指的是单文件组件中的name,例如 ClientList.vue 中的name, 不是指路由中的name 2、keep-alive 必须要放在最后一级，include才会生效，例如，A 页面嵌套 Asub 页面，则keep-alive要放在Asub页面，而不是放在A页面中 备注2 ：路由中的 name 需统一与单文件组件中的 name 一致， 这样的目的是为了后...
前端性能优化-keep-alive
dazwxrt0338的博客
02-04 144
什么是Keep-Alive Keep-Alive是浏览器端和服务器端约定的一种提高传输效率的协议。我先举个例子吧，我现在搬家，有10个箱子，如果我自己来搬的话，每次只能带一个箱子，那么搬到目的地，需要跑十次，而如果我要找一家搬家公司的货车来，一次就可以把10个箱子搬到目的地。在这个例子中，使用货车搬家，就相当于使用了Keep-Alive，很显然效率可以提高很多。大家都知道，建立一次Ht...
Keep-alive 缓存及其缓存优化原理
油墨香^-^的博客
02-23 756
是vue内置组件，在源码定义中，也具有自己的组件选项如datamethodcomputedprops等。具有抽象组件标识abstract，通常会与动态组件一同使用。包裹动态组件时，会缓存不活动的组件实例，将它们停用，而不是销毁它们。被缓存的组件会触发activated或生命周期钩子。会缓存组件实例的vnode对象 ，和真实dom节点，所以会有max属性设置。不会在函数式组件中正常工作，因为它们没有缓存实例。
使用keep-alive优化网页功能(vue)
weixin_43694465的博客
04-26 87
标签 是vue自带的标签 处理ajax路由重复请求的问题 标签显示的是路由所对应的内容 作用：路由的内容被加载过一次之后，我就把路由中的内容放到内存之中 下一次再进这个路由的时候，不需要你去重新渲染这个组件去从新执行钩子函数，只需要你从 内存里把以前的内容拿出来显示到页面上就可以了 activated函数怎么产生的？ 引入时vue中就会多出这个函数 activated函数什么时候执行？ 当页面重...
Vue2 Vue3 keep-alive 使用、解决keep-alive缓存导致页面不刷新的问题
林中明月间丶
10-31 3340
<keep-alive exclude="Detail"> <router-view/> </keep-alive> activated () { if (this.lastCity !== this.city) { this.lastCity = this.city this.getHomeInfo() ...
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
10-17
《深入理解与使用keep-alive缓存路由页面》 在Vue.js开发中，有时我们需要保持组件的状态，避免在页面切换时重新渲染，提高用户体验。这时，`<keep-alive>`组件就显得尤为重要。本文将详细介绍如何配合`router-view...
vuex + keep-alive实现tab标签页面缓存功能
10-16
"vuex + keep-alive" 的组合就能很好地满足这一需求，通过缓存页面数据，使用户在切换Tab时无需重新加载数据，提升用户体验。 `keep-alive` 是Vue提供的一个内置组件，它能够将组件的状态进行缓存，当组件再次被...
vue中keep-alive组件的入门使用教程
12-10
5. **性能优化**：虽然`<keep-alive>`可以节省性能，但过度使用可能导致内存占用增加，因此应谨慎使用，并确保组件状态管理得当。 在实际开发中，`<keep-alive>`是实现页面间状态保持和优化用户体验的强大工具。...
Vue keep-alive组件页面缓存控制示例
最新发布
03-05
本示例主要探讨如何使用`<keep-alive>`组件进行页面缓存控制。 `<keep-alive>`的基本用法是在需要缓存的组件外层包裹。例如： ```html <keep-alive> <component :is="currentComponent"></component> </keep-...
解决vue keep-alive 数据更新的问题
12-01
这就是为什么使用`<keep-alive>`后，页面数据无法更新的问题所在。 为了解决这个问题，我们需要将数据获取的逻辑迁移到`activated`钩子中。因为`activated`在组件被缓存并重新激活时会触发，这确保了每次组件被显示...
详解关于Vue2.0路由开启keep-alive时需要注意的地方
01-19
Vue2.0 做应用必有的需求就是页面数据需要做缓存，不用每次进入页面都要把数据重新请求一遍，每次页面切换都有段等待数据相应时间，这个用户体验可想有多么蛋疼，所以页面缓存是必要的，啥时候需要更新页面数据呢？可以监听状态变化，或者是手动下拉刷新重新请求数据，酱紫，我想用户体验会做的更好。 keep-alive的作用以及好处 在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省性能。 废话不多说直接上码，一般是在 src/App.vue 设置开
vue使用keep-alive实现详情页进入列表页缓存，其他页面进入列表页不缓存
m0_64512327的博客
12-01 891
场景：查询列表页面输入筛选条件或者改变页码，进入详情页后返回都会刷新页面，不保留内容，所以通过对keep-alive的配置可以实现对筛选条件以及页面的保存。
keep-alive(切换页面，保持状态)
一只前端小菜鸟
06-24 5228
接触过电商网站，大家可能对类似京东的一些方面比较有印象，比如我正在商品列表浏览商品，浏览了很长一段的商品，然后点击切换到其他页面了，再次点击回到商品列表页面，还在之前浏览的地方，类似这种功能是怎么实现的呢？ 这次就说说在vue中的简单实现。 vue官网提供了keep-alive的方法（也算是内部封装好的组件吧） 官网介绍中提到，keep-alive只能包裹在封装的组件中，而不能直接包裹在类似...
vue使用keep-alive缓存页面
m0_51328823的博客
02-16 1736
概念 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中作为标签使用。 作用 在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性 缓存组件 一、缓存所有页面 直接包裹根router-view即可 <template> <div id="app"> &
vue使用（keep-alive）防止切换页面闪烁
qq1722377628的博客
04-27 2522
keep-alive的详细介绍我不多讲，请看官网keep-alive 问题来源： 在 app.vue中我使用了<keep-alive>进行页面的缓存， 源代码： <div id="app"> <keep-alive> <router-view></router-view> </keep-alive&...
vue性能优化之keep-alive
qq_35401191的博客
10-21 1211
路由被切换的时候会重新发送ajax请求。mounted钩子函数会被重新执行 vue自带标签 kepp-alvie   keep-alvie  ： 路由内容加载一次后，就把路由内容放在内存中（相当于cookie），下次加载的时候就不用发送ajax请求了 当我们需要重新发送ajax请求时  当我们使用keep-alvie 时候 组件会多一个钩子函数  activaed activaed（）...
keep-alive 实现页面缓存
halo1416的博客
08-12 3964
一、使用场景 在vue实际开发中（开发的都是单页应用），我们都使用Vue-Router做页面导航，而每次切换路由的时候，页面都是会进行重新加载的，对应的所有周期页面被重新执行一遍。 但是，有一些场景却需要我们把页面状态保存下来，否则用户体验很不好，如： 分页列表中，假设我们已经切换到第五页，这时我们进入了其中一条数据的详情页面，然后返回，这时如果不做特殊处理，会重新执行created 和 mounted生命周期，从而重新加载页面，默认就显示到第一页去了，绝望！！ 一个列表页中，存在条件筛选，查询到相关数据
keep-alive 页面缓存详解
小贤笔记
10-13 2845
文章摘自 你蠢哭我咯 - CSDN vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 缓存整个页面或组件 &lt;keep-alive&gt; &lt;component&gt; &lt;!-- 组件将被缓存 --&gt; &lt;/component&gt; &lt;/k...
vue之keep-alive性能优化
m0_37115637的博客
12-20 796
看过vue.js的api的小伙伴们都知道，keep-alive主要用于保留组件状态或避免重新渲染。那么我们在不同的组件切换的时候为了避免组件的重复渲染从而导致了我们的性能降低，我们通常都会在app.js的&lt;router-view/&gt;外面报一层keep-alive,代码如下： &lt;keep-alive&gt; &lt;router-view/&gt; ...
vue3.0中keep- alive生命周期使用
05-17
在这个示例中，我们使用了 `keep-alive` 组件来缓存某些路由页面。其中，`activated` 和 `deactivated` 钩子函数用于在缓存的页面被激活或停用时进行相应的操作，例如发送网络请求、更新数据等。 需要注意的是，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值