vue中keep-alive使用

最新推荐文章于 2023-07-06 16:30:31 发布
原创 最新推荐文章于 2023-07-06 16:30:31 发布 · 168 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #js #html #python

keep-alive是Vue的一种内置组件，用于缓存不活动的组件，避免在切换路由时销毁组件，保持其状态。在router配置中，通过在meta对象中设置keep为true来标记需要缓存的路由。在App.vue中，使用keep-alive包裹组件，并通过v-if结合$route.meta.keep来决定是否渲染，从而实现组件的按需缓存。

keep-alive的概念

keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现

路由中的设置

这里用到了路由的原数据
在router里面
加一个属性
meta:{
keep：true
}在这里插入图片描述

使用

在app.vue中
用keep-alive包裹要缓存的数据
v-if判断是否要渲染
通过$route.meta.keep来取值
在这里插入图片描述

vue # keep-alive
skysys的研究小屋
08-10 273
问题描述 用Vue.js做移动端开发的时候，经常会遇到这样的应用场景： 首先，让用户看到新闻列表；然后点击新闻标题，切换到新闻详情的组件，以展示新闻详情。 很多应用场景都于此类似，比如先进入商品列表，点击某一个商品条目，则切换到商品详情的组件。 这种场景往往会碰到一个问题，当我每一次从详情组件退回到列表组件的时候，列表组件会重新发出ajax请求。考虑到下面2条原因，总觉得这么不好。 1.列表组件上的数据不会在短短几分钟之内就更新，完全没必要每次都发出ajax请求。这样势必降低用户体验 2.浪费移动设备的流量
keepAlive详细操作
zzh990822的博客
01-23 751
正常生命周期：beforeRouteEnter --> created --> mounted --> updated–>destroyed 使用keepAlive后生命周期： 首次进入缓存页面：beforeRouteEnter --> created --> mounted --> activated --> deactivated 再次进入缓存页面：beforeRouteEnter --> activated --> deactivated .
Vue中 key keep-alive
w1366352655的博客
12-18 339
Vue中 key keep-alive keep-alive key <!DOCTYPE html> <html> <head> <title></title> <script t...
Vue——keep-alive
前端成长之路
01-05 140
最近在开发过程中有一些对网页使用体验的需求。比如列表页有三个可以切换的tab：A,B,C，每个tab对应不同列表以及相应的增删改查，此时会发现，在tab-B或tab-C中进入新增或编辑页面，点击返回，回到的页面是tab-A,而不是之前浏览的页面，这很影响使用体验。此时就可以使用到keep-alive来对组件进行缓存。 从官方文档来理解，就是用于保留组件状态或避免重新渲染。 使用方式： 1.可以使用基础的使用方式，在router.js文件中给要缓存的路由组建添加meta: {keep-alive: true}
Vue之keep-alive
编译的阿喵
05-12 1132
使用场景： 动态组件切换，当你选择了一篇文章，切换到 b 标签，然后再切换回 a，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例； 当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会...
vue中keep-alive的用法及问题描述
12-29
在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省...
精选资源
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保持滚动条位置的实现方法
10-17
2. 在Vue的主组件app.vue中，使用<keep-alive>包裹<router-view>，并根据路由的meta属性决定是否激活<keep-alive>： ```vue <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-...
vue中keep-alive组件的入门使用教程
12-10
Vue.js中的`<keep-alive>`组件是一种非常实用的功能，用于在组件切换过程中保持组件的状态，避免每次切换都重新创建和销毁组件实例。这在处理需要维持数据或状态的复杂应用时尤其有用，例如音乐播放应用中保持播放...
vue keep-alive
sunlizhen的专栏
05-13 832
keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素；在这里keep-alive配合了router-view使用 <keep-alive> <loading></loading> </keep-laive> 当组件在keep-alive内...
【Vue】keep-alive
jzq950522的博客
03-11 616
keep-alive是Vue提供给我们使用的高阶组件。我们可以使用keep-alive缓存需要缓存的组件，进而节省性能。当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行。 被keep-alive包裹的内容会被缓存，当然我们并不是所有的页面都要缓存，Vue提供了include、exclude两个属性给我们有条件的缓存。 &lt;ke...
vue 中的 keep-alive
weixin_39111384的博客
12-28 5607
一、什么是 Keep-alive keep-alive 是 vue 中的内置组件，能够在组件切换过程中将状态保留在内存中，防止重复的渲染 DOM； keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们； keep-alive 可以设置一下 props 属性： include - 字符串或者是正则表达式。只有名称匹配的组件才能被缓存 exclude - 字符串或者是正则表达式。 max - 数字。最多可以缓存多少组件实例。 关于 keep-alive 的基本用法 <keep-
vue中的keep-alive
浩星
12-04 525
前言： 在我们项目中很多地方是需要使用缓存而不是直接重新加载的，比如说：我从首页进入，列表页面，列表页面再进入详情页面，在这个过程中，详情页面返回列表页面的时候我是希望可以看到我刚刚进来详情前的页面，而不是重新刷新，这样用户体验不好，在这里就需要keep-alive了，但是keep-alive的缓存的缓存的话是一直有缓存，在我从列表回到首页后。重新进入列表，我希望的是刷新的列表，而不是缓存的列表。这就是我这里的完整逻辑。 vue的keep-alive介绍： 有时候我们不希望组件被重新渲染影...
Vue里的keep-alive
张木期的博客
10-26 1076
keep-alive官方文档 官方讲的还是太简单,下面总结一下使用场景吧 前言 在Vue构建的单页面应用（SPA）中，路由模块一般使用vue-router。vue-router不保存被切换组件的状态， 它进行push或者replace时，旧组件会被销毁，而新组件会被新建，走一遍完整的生命周期。 但有时候，我们有一些需求，比如跳转到详情页面时，需要保持列表页的滚动条的深度，等返回的时候依然在这个位置，这样可以提高用户体验。 在Vue中，对于这种“页面缓存”的需求，我们可以使用keep-alive组件来解决这个
Vue中的Keep-alive
D-的博客
07-06 5298
keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们keep-alive可以设置以下propsinclude- 字符串或正则表达式。只有名称匹配的组件会被缓存exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存max- 数字。最多可以缓存多少组件实例关于keep-alive使用includes和exclude匹配首先检查组件自身的name选项，如果name。
vue中 keep-alive
最新发布
04-01
嗯，用户想了解Vue.js中keep-alive的使用方法和常见场景。首先，我需要回忆一下keep-alive的基本概念。记得keep-alive是Vue的内置组件，用来缓存不活跃的组件实例，避免重复渲染。用户可能已经知道这点，但需要更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

划水的乌贼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值