＜keep-alive＞标签

前端卡布达

已于 2022-06-22 16:25:44 修改

阅读量255

点赞数

文章标签：前端

于 2022-06-22 16:19:44 首次发布

本文链接：https://blog.csdn.net/m0_69983788/article/details/125411702

版权

本文详细介绍了 Vue 中的 `` 组件，它用于在页面路由切换时缓存组件状态，使得当用户返回时能够快速恢复先前的内容。通过 `include` 和 `exclude` 属性，可以精确控制哪些组件应该被缓存，哪些不应被缓存。在实际应用中，合理使用 `` 能有效提升用户体验。

摘要由CSDN通过智能技术生成

<keep-alive>：使组件的内容不被销毁=》路由页面切换后，缓存前一个路由页面的内容，当返回该页面的时候，展示切换前的内容。

<keep-alive>
    <router-view/>
</keep-alive>

可以用include和exclude对keep-alive进行定义,如果不添加任何定义时，默认对所有路由页面生效。

<keep-alive include=“home”>只对home进行缓存

<keep-alive exclude=“home”>就不缓存home

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端卡布达

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
＜keep-alive＞标签

keep-alive
复制链接

扫一扫

vuex + keep-alive实现tab标签页面缓存功能

10-16

总的来说，"vuex + keep-alive" 实现的Tab标签页缓存功能，通过`vue-router`的`name`属性、`keep-alive`的`include`属性以及`vuex`的状态管理，有效地解决了页面缓存和标签切换的问题，提高了应用的性能和用户体验。...

keep-alive标签的作用

wang091816的博客

07-17

2028

keep-alive标签的用法 keep-alive标签是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 include: 字符串或正则表达式。只有匹配的组件会被缓存。 include: 字符串或正则表达式。只有匹配的组件会被缓存。 exclude优先级大于include 结合router，缓存部分页面使用$route.meta的keepAlive属性：需要在router中设置router的元信息meta： k

参与评论您还未登录，请先登录后发表或查看评论

vue 中如何利用 keep-alive 标签实现某个组件缓存功能？

A12536365214的博客

07-31

1009

当我们切换组件时，组件的状态被缓存起来，而不是被销毁。这样，在切换回已缓存的组件时，组件的状态将保持不变，提高了性能和用户体验。是Vue提供的内置组件，用于缓存动态组件，可以有效地提高组件的性能，避免重复渲染和销毁。因此，如果你希望缓存某个组件，记得为该组件设置。标签来缓存某个组件，你需要将需要缓存的组件包裹在。属性，这个属性的值为当前需要渲染的组件的名称。在上述示例中，我们有两个组件。属性将被用作缓存的唯一标识。以下是一个示例，演示如何使用。标签来实现组件的缓存功能。标签中，并为该组件设置一个。

万字长文——前端开发必看的KeepAlive原理详解

最新发布

XIAO_A_fighting的博客

05-10

1401

本文将从原理+应用+源码(Vue2和Vue3)的角度全面介绍组件，全文共计16000字，阅读时间大概30min+，建议码住在看，相信看完本文的你会对该组件有一更深刻的认识。

Vue内置组件之keep-alive详情解析、用法及遇到的“坑”

weixin_61175223的博客

03-08

1724

概念 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。作用在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。主要用在缓存表单，一些商城商品的加载...... Props include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。缓存所..

vue中使用keep-alive缓存组件的理解和总结

油墨香^-^的博客

04-11

696

前不久给一个老哥解决一个问题，他出现的问题是，每访问一次组件，切换组件的时候会把其他访问过的组件的网络请求全部重新发一遍，老哥找了几天，也找了很多人请教，没发现问题，我也是折腾了好大的功夫才找到问题，没错就是keep-alive这个标签的锅。而且这个老哥比较狠的是，他不是简单的用keep-alive包裹页面切换的，而是包裹在了app.vue里的里....大概结构长这样当去掉app.vue里的keep-alive之后问题就解决了，借此契机，咱们今天详细讲讲，这个keep-alive，到底是怎么个用法。

Vue学习笔记（十四）——keep-alive标签用法

讨厌走开啦

04-26

4211

参考文档：https://cn.vuejs.org/v2/guide/ 本文主要介绍keep-alive标签的用法。 keep-alive标签用于切换组件时保留隐藏组件的状态。例如当组件a显示时，变更了组件a的data，然后把组件a切换为组件b，再切回组件a：如果组件被keep-alive包裹，则组件a的data为变更后的状态；如果组件未被keep-alive包裹，则组件a的data为初始化状态。...

vue 使某个组件不被 keep-alive 缓存的方法

10-17

</keep-alive> ``` - `exclude`: 任何匹配`exclude`规则的组件都不会被缓存。同样，如果你想要排除名为`'a'`或`'b'`的组件： ```html <keep-alive :exclude="/a|b/"> <component :is="view"></component> </...

vue keep-alive请求数据的方法示例

08-27

标签：Vue Keep-Alive 请求数据，Vue Keep-Alive 数据 Vue Keep-Alive 请求数据的方法示例在 Vue 中，Keep-Alive 是一个非常有用的机制，可以缓存组件的状态，减少不必要的组件重渲染，提高应用程序的性能。但是...

vue keep-alive 动态删除组件缓存的例子

12-13

3、当前组件的route-view,外层包裹keep-alive，include用你从仓库里面取出来的数组 4、关闭标签页(也就是后退路由的时候)，清空store里的数组总结：通过动态的设置include（要缓存的组件）的数组，来动态的控制...

all-keep-alive:一个后台管理的tabs页面例子，打开的tabs页会有缓存，关闭之后清除缓存。包含同一个组件的多次复用的tabs

05-29

all-keep-alive Features 一个升级版的keep-alive，可以用来缓存所有的页面，包括复用页面。可以在实现一些多标签页面，打开标签需要缓存页面数据的场景下使用 install npm install all-keep-alive 使用 import { ...

Vue.js 中的 keep-alive 组件使用详解

程序猿徐师兄的博客

06-08

1856

在本文中，我们介绍了 Vue.js 中的 keep-alive 组件，它可以帮助我们优化页面性能，特别是在页面中存在大量需要频繁创建和销毁的组件时。我们学习了如何使用 keep-alive 组件以及它的作用。通过使用 keep-alive 组件，我们可以缓存组件实例或者 DOM 结构，减少组件的创建和销毁次数，从而提高页面的性能。如果您想深入学习 Vue.js，可以参考 Vue.js 官方文档：https://vuejs.org/。附：完整代码示例下面是一个完整的代码示例，包括和App组件。

vue keepalive

universe的博客

02-24

270

keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现 App.vue <template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> |

Vue的keep-alive标签

qq_44849271的博客

10-12

278

Vue使用keep-alive标签实现组件缓存首先看一下使用keep-alive的效果keep-alive的使用方式keep-alive的属性与缓存组件的钩子函数实际代码首先看一下使用keep-alive的效果简单介绍：Son1组件切换到Son2组件后，再回到Son1组件，Son1组件的输入框并没有恢复初始值。这就是将Son1组件缓存了下来。 keep-alive的使用方式 <keep-alive> <router-view></router-view> &l

Vue--keep-alive--详解

IT利刃出鞘的博客

08-24

501

本文介绍Vue中的keep-alive。 keep-alive标签主要用于保留组件状态或避免重新渲染。

vue keep-alive 保留切换后的状态，上一个状态，之前状态，tab切换

爱睡的虫虫

04-06

1763

keep-alive Props： include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。用法：包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和相似，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在 ...

【vue2】keep-alive

阿程的博客

06-16

1377

keep-alive

对 keep-alive 的理解，使用场景以及存在的问题

小草莓的博客

07-06

4919

include(包含的组件缓存) 、 exclude(排除的组件不缓存，优先级大于include) 、max(最大缓存数，内部采用lru算法用于维护缓存列表)若用 keep-alive 包住A组件和B组件，从A组件跳转到B组件，在哪里更新B组件页面的数据？② exclude - 字符串或正则表达式，任何名称name匹配的组件都不会被缓存。，缓存的组件重新进入不会再触发created生命周期中的方法，因此数据不会更新。③ max - 缓存的最大个数（如果超过最大缓存个数，则移除最先缓存的组件）

keep-alive 的详细介绍

wang12345111的博客

10-07

2905

1.keep-alive 了解 keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染。 2.keep-alive的运用如图所示:给你的视图标签外套一个keep-alive标签就实现了组件的缓存 3. keep-alive的include和exclude属性上图中是所有组件都实现缓存，那么我们要实现指定组件缓存就需要用到include和exclude这两个属性了如图所示 include所绑定的Home组件...

<keep-alive>和route怎么使用

04-27

<keep-alive>是Vue.js的内置组件，用于缓存组件实例，以避免在组件切换时重复渲染和销毁。一般来说，我们在需要缓存的组件外层用<keep-alive>包裹，在组件内使用keep-alive指令即可。例如，我们有两个组件A和B，...