keep-alive的使用经验

最新推荐文章于 2023-02-15 22:21:36 发布
原创 最新推荐文章于 2023-02-15 22:21:36 发布 · 257 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文分享了Vue中keep-alive组件的使用经验，详细介绍了如何利用include、exclude属性以及在路由meta中设置缓存标志。特别提到在处理父子路由缓存时，将子路由提升至同级可以避免父级组件被销毁，同时通过hidden属性实现完美缓存。这是一个关于Vue缓存策略的实用指南。

keep-alive的使用经验
vue的keepalive可以说是缓存方法里很方便的了，但是有一些场景需要注意一下，简单说一下最常用的两种方法
1，在keepalive的include和exclude属性，不赘述了，看官方文档很简单
2，在路由文件中的meta里，添加一个属性keepalive：true，然后

	<keep-alive v-if="$route.meta.keepAlive">
      <router-view />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />

这判断的用意很明显，就是缓存meta里有keepalive属性的组件，反之不缓存

重点来了
其实vue的keepalive缓存的事组件之间的切换，如果有个需求是，从一个界面跳转到它的子界面，此时这个父界面是默认被摧毁的，自然不能缓存了。 只需要把子路由拿出来跟父级同级就行了
在这里插入图片描述目标是从高级查询跳到子路由详情里，这里是拿出来同级之后的样子，
此时导航栏会通过路由渲染组件的入口，只需要再加个hidden：true，完美解决

精选资源
Nextjs-keep-alive-demo.rar
05-09
Nextjs-keep-alive 实现，vue中有这个专门的keep-alive插件，但是react没有，更别提nextjs了，这是现成的项目demo。 next9，10，11，12，13，14 及以上都可以用。直接使用或者移植到你的项目，非常方便。集成了发送...
精选资源
vue组件 keep-alive 和 transition 使用详解
01-19
1.keep-alive 能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件...
vue之keep-alive
qq_37028216的博客
01-03 221
vue通常作为单页面开发，而实际业务开发后台管理系统中，使用过程中可以开多个tab页使用起来比较方便。但是使用vue-router进行各个tab页之间路由切换时，每次重新进入路由之前页面中的资料就全部重新刷新一次。这显然达不到我们方便使用的效果。因此,keep-alive就能派上大用场了。 官方文档解释 使用keep-alive标签报过动态组件，会缓存不活动的组件实例。   使用方式 ...
keepAlive使用
weixin_48286936的博客
09-16 363
前言：keepAlive用于组件缓存，被keepalive包含的组件会缓存 项目中碰到场景：一个tab列表，进入第二个tab内页详情之后返回，依然让tab停留在第二个tab上，即保存状态 1.给需要缓存的组件加name 2.在包含该组件（离该组件最近的一个父组件）上添加keepalive 3.如果该组件包含很多个子组件，而只有一个自组件是需要被缓存时，可用include :include="keepAliveArr" keepAliveArr: ['personal-tabs']（刚刚需要被缓存的组件）
keep-alive的使用-及遇到的问题
qq_20623665的博客
02-15 2112
被keep-alive包括的的组件，当组件切换是不是走销毁流程，而是缓存起来keep-alive有三个参数include匹配name名被缓存，exclude匹配name名不会被缓存，max被缓存组件数量不写，组件默认全部缓存include匹配参数--name指的.vue组件内的name名搭配路由使用-在meta中设置自定义键值对，命名推荐语义化，使用keepAlive。
vue中的keep-alive使用总结(推荐阅读)
hsany330的专栏
07-01 340
在平常开发中，有些组件只需要加载一次，后面的数据将不存在变化，亦或者是组件需要缓存状态，滚动条位置等，这个时候，keep-alive的用处就立刻凸显出来了。 1.App.vue中使用keep-alive，include表示需要缓存的页面，exclude表示不需要缓存的页面，你可以只设置其中一个即可，但两个同时设置的时候，切记exclude优先级高于include，例如a组件在exclude中和include中都存在，那么，a组件是不会被缓存的 <template> <d.
有关keep-alive缓存路由的各种用法
qq_41429765的博客
08-28 1418
keep-alive基本用法 include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。 主要用于保留组件状态或避免重新渲染。 <!-- 基本 --> <keep-alive> <component :is="view"></component> </keep-alive> <!-- 多个条件判断的子组件
keep-alive
Zhoujia1316的博客
06-01 1216
keep-alive的概念 keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 作用 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性 参数 Keep-alive 组件提供了 include 和 exclude 两个属性，允许组件有条件的进行缓存。 include: 字符串或正则表达式。只有匹配的组件会被缓存。 exclude: 字符串或正则
精选资源
keep-alive的介绍及使用
01-08
如果需要频繁切换路由，这个时候就可以考虑用keep-alive了，来达到避免数据的重复请求的目的 keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗。 简单一点来说就是从页面A链接到其他页面后回退到页面A...
彻底揭秘keep-alive原理(小结)
11-30
一、前言 ...本文介绍的内容包括： keep-alive用法：动态组件&vue-router keep-alive源码解析 keep-alive组件及其...使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 2.2 一个场景 用户在某
vue keep-alive请求数据的方法示例
08-27
但是，在使用 Keep-Alive 时，可能会遇到一些问题，例如请求数据的方法示例、keep-alive 属性的设置等。本篇文章将详细介绍 Vue Keep-Alive 请求数据的方法示例，并提供解决方案来解决 keep-alive 属性的设置问题。 ...
keep-alive对路由进行缓存以及使用方法和场景
Jul的博客
07-07 1477
路由缓存 正常路由占位符 Router-view 对组件进行缓存和不缓存的操作 <div> <!-- 缓存显示的组件 --> <keep-alive v-if="$route.meta.isAlive"> <router-view/> </keep-alive> <!-- 不缓存组件 --> <router-view v-if="!$route.meta.isAlive"> </router-vie
keep-alive用法
xiaoququ的博客
09-28 5598
方法一 keep-alive 结合include属性缓存组件 使用情况：例如一个搜索框，输入文字后，切换到另一个组件，再返回的时候input框的文字会消失，所以要使文本框组件缓存 其实在keep-alive上有两个属性 include 值为字符串或者正则表达式，匹配的组件会被缓存。 exclude 值为字符串或正则表达式，匹配的组件不会被缓存。 // include 只缓存组件名字为home的组件，其他组件不会缓存，而exclude恰好相反 <keep-alive include="home"&g
vue路由缓存（子路由缓存、动态路由缓存、滚动条相互影响）
m0_50278775的博客
04-20 4788
移动端中，我们浏览商品列表的时候，点击进入详情页面，然后返回到商品列表，一般都是用户浏览到哪里，返回来的时候还是那个位置(试想一下，如果一返回，页面重新刷新，你又要往上滑不知道多少页才能找到你刚刚的那款商品，这么一想是不是很崩溃），但是vue很贴心，给我们设计了keep-alive <keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们 keep-alive在vue2和vue3中还是有些区别的 在vue2中 <keep-alive> &.
keep-alive相关用法及使用场景
Dax1_的博客
12-15 2544
keep-alive 用法 keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 用法 <keep-alive> <component> <!-- 该组件将被缓存！ --> </component> </keep-alive> 使用场景 例如在A组件内多个输入框中输入信息，此时需要跳转进入B组件进行操作，再返回A组件。若没有使用 keep-alive，则A组件内输入框中的信息都会被清空，因为A组件被
vue 使用 keep-alive 需要注意的几个点
一人一城温一壶酒的博客
04-01 882
1、v-if="$route.meta.keepAlive" 需要放在router-view上，不能放在keep-alive上 <template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view
keep-alive上加v-if导致缓存失效
小妹的博客
12-24 4527
是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们 用法 <keep-alive> 正确用法 <router-view v-if="$route.meta.keepAlive"></router-view> </ke...
vue路由keep-alive
atu1111的博客
05-08 3299
vue路由keep-alive   keep-alive会把其包裹的所有组件都缓存起来 1.在App.vue写2个router-view出口 //需要缓存的<keep-alive> 　　<router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> //不需要缓存的 <router-view v-if="!$route.meta.keepAlive"></ro
keep-alive 用法
qq_37330613的博客
03-29 322
需求 首页 列表页 详情页 首页进入列表页 列表页进入详情页 详情页返回列表页 滚动条在相应位置 列表页返回首页 首页进入列表页 在最上面 第一步 在app中设置需要缓存的div //缓存的页面 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> //不缓存的页面 <router-view v-if="!$route.meta..
keep-alive 使用方法
最新发布
09-26
<think> 我们正在讨论的是Vue中的keep-alive组件，而不是HTTP的Keep-Alive。用户的问题是关于Vue中keep-alive的使用方法。 Vue的keep-alive是一个内置组件，用于缓存不活动的组件实例，以避免重复渲染造成的性能消耗。 根据引用[1]和[4]，我们可以知道： 基本用法：用<keep-alive>包裹动态组件或路由组件，被包裹的组件会被缓存。 动态按需缓存：可以通过条件判断或者路由元信息来控制哪些组件需要缓存。 引用[1]提供了基本用法示例： <keep-alive> <component :is="currentComponent"></component> </keep-alive> 引用[4]提到了动态按需使用keep-alive的场景，例如在路由中根据条件缓存某些页面。 因此，回答将围绕Vue中keep-alive的使用方法展开，包括基本用法、参数以及动态缓存策略。 注意：引用[2]和[3]是关于HTTP的Keep-Alive，与当前问题无关，可以忽略。 另外，用户上次的问题是关于Vue3的hook和Vue2的mixins，但这次问题切换到了keep-alive，因此我们需要专注于keep-alive。 </think> ### Vue.js 中 Keep-Alive 的使用方法详解 #### 一、基本概念 Keep-Alive 是 Vue.js 的内置组件，用于缓存**不活动组件**的实例，避免重复渲染： ```vue <keep-alive include="Home,Profile"> <component :is="currentComponent"></component> </keep-alive> ``` **核心作用**: 1. 减少组件重复创建/销毁的性能开销 2. 保留组件状态（如表单输入、滚动位置）[^1] 3. 适用于频繁切换的 Tab 页或路由视图[^4] --- #### 二、基础用法 ##### 1. 包裹动态组件 ```vue <template> <keep-alive> <component :is="activeComponent"></component> <!-- 动态组件缓存 --> </keep-alive> </template> ``` ##### 2. 包裹路由视图 ```vue <template> <router-view v-slot="{ Component }"> <keep-alive> <component :is="Component" /> <!-- 路由组件缓存 --> </keep-alive> </router-view> </template> ``` --- #### 三、进阶控制参数 | 参数 | 作用 | 示例 | |------------|----------------------------------------------------------------------|------------------------------------------| | `include` | 匹配组件名称进行缓存 | `include="Home,Profile"` | | `exclude` | 排除指定组件不缓存 | `exclude="Login"` | | `max` | 限制最大缓存实例数 (LRU算法淘汰) | `:max="5"` | | 正则匹配 | 使用正则表达式匹配组件名 | `:include="/Home|Profile/"` | | 数组匹配 | 使用数组指定缓存组件 | `:include="['Home', 'Profile']"` | --- #### 四、动态按需缓存（高级场景） 结合路由元信息实现精准控制： ```js {4-6} // router.js const routes = [ { path: '/product/:id', component: ProductDetail, meta: { keepAlive: true } // 标记需要缓存的组件 } ] ``` ```vue {7} <!-- App.vue --> <template> <router-view v-slot="{ Component, route }"> <keep-alive :include="cachedViews"> <component :is="Component" :key="route.meta.usePathKey ? route.path : undefined" /> </keep-alive> </router-view> </template> <script> import { ref, watch } from 'vue' import { useRoute } from 'vue-router' export default { setup() { const cachedViews = ref(new Set()) const route = useRoute() watch(route, (to) => { if (to.meta.keepAlive) { cachedViews.value.add(to.name) // 动态添加缓存 } }) return { cachedViews } } } </script> ``` **场景说明**： - 首页 → 列表页（缓存）→ 详情页（不缓存） - 详情页 → 列表页（读取缓存）→ 首页（读取缓存）[^4] --- #### 五、生命周期钩子 被缓存的组件会触发特有钩子： ```vue <script> export default { activated() { // 组件激活时调用（从缓存恢复） console.log('组件被激活') }, deactivated() { // 组件停用时调用（进入缓存） console.log('组件被缓存') } } </script> ``` --- #### 六、注意事项 1. **内存管理**： - 避免缓存大型组件（如图表页面） - 使用 `max` 属性限制缓存数量[^1] 2. **数据更新**： - 使用 `:key` 强制更新缓存组件 - 在 `activated` 中刷新异步数据 3. **路由守卫**： - `beforeRouteLeave` 守卫仍会触发 - `beforeRouteEnter` 只在初次创建时触发 > 最佳实践：对高频访问但数据更新少的页面（如用户中心）使用缓存[^3]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值