vue的keep-alive使用

最新推荐文章于 2024-05-30 15:55:44 发布
最新推荐文章于 2024-05-30 15:55:44 发布
阅读量220 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LJX9738/article/details/114394767
版权

vue中keep-alive如何简单使用

1.简介
keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
2.内置属性
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。
3.自带生命周期
1.activated：页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
2.deactivated ：页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated
4.基础用法

我写了一个简单的计数器，是放在子组件中的的，为了检测keep-alive的使用
父组件
在这里插入图片描述
子组件
在这里插入图片描述

页面
在这里插入图片描述
当我把数字加到五的时候在这里插入图片描述
然后我再点击消失按钮，看下
在这里插入图片描述
我再点击出现，看下num是不是还是五
在这里插入图片描述
还是五，说明，keep-alive起作用了，数据得到了缓存
再来测试下他们的生命周期

初始化的生命周期，
在这里插入图片描述

我再点击下消失试试
在这里插入图片描述

我再次点击出现
在这里插入图片描述
另外还能从路由中设置
在这里插入图片描述
然后再页面中用this.$route.meta.keepAlive拿到true的值就行领

总结：当子组件是被keep-alive包裹的时候，初始化会触发子组件的created和mounted生命周期，第二次只会触发子组件的activated
关闭时候，不会触发子组件的destroyed生命周期了，而是触发子组件的deactivated生命周期

前端爱好者～
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中keep-alive的用法及问题描述
08-27
主要介绍了vue中keep-alive的用法及问题描述,本文给大家介绍的非常详细，具有一定的参考解决价值，需要的朋友可以参考下
Vue中 keep-alive 详解
明天也要努力的博客
01-13 6万+
1. 简介 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 作用： 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。 原理： 在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode
VUE keep-alive动态缓存页面
最新发布
Qing_0124的博客
05-30 359
4、需求描述：需要缓存列表页面，从列表页点击跳转至详情页，从详情页返回需要缓存之前的数据以及定位到查看详情的项，从其他页面进入列表页需要刷新。ps:定位元素使用 document.getElementById(`定位元素id`).scrollIntoView();3、keep-alive/index.vue（缓存页面）
关于HTTP中的keep-alive
weixin_44374938的博客
06-03 1万+
1.HTTP中的keep-alive 既然上面提到了HTTP是基于请求与响应的，且最主要的两个特点就是无连接和无状态，但需要说明的是，虽然是无连接的，但其底层也就是传输层大多却是基于 TCP面向连接的通信方式，因此，这里的无连接指的是：当server端和client端进行通讯的时候，client端向server端发起请 求，server端接收请求之后返回给client端一个响应，之后就会断开不再继续保持连接了；这样有一个好处就是对于只有一次访问的连接来说不仅节省 资源还很高效，但很明显，如果client端还
keep-alive的使用及详解
一夜枫林
07-18 5万+
概念 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 作用 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。 原理 在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode 的
对 keep-alive 的理解，使用场景以及存在的问题
小草莓的博客
07-06 4697
include(包含的组件缓存) 、 exclude(排除的组件不缓存，优先级大于include) 、max(最大缓存数，内部采用lru算法用于维护缓存列表)若用 keep-alive 包住A组件和B组件，从A组件跳转到B组件，在哪里更新B组件页面的数据？② exclude - 字符串或正则表达式，任何名称name匹配的组件都不会被缓存。，缓存的组件重新进入不会再触发created生命周期中的方法，因此数据不会更新。③ max - 缓存的最大个数（如果超过最大缓存个数，则移除最先缓存的组件）
vue keep-alive请求数据的方法示例
08-27
Vue Keep-Alive 请求数据的方法示例 Vue Keep-Alive 是 Vue 框架中的一个功能强大且实用的机制，可以缓存组件的状态，减少不必要的组件重渲染，提高应用程序的性能。但是，在使用 Keep-Alive 时，可能会遇到一些...
vue keep-alive 动态删除组件缓存的例子
10-16
今天小编就为大家分享一篇vue keep-alive 动态删除组件缓存的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue keep-alive 数据更新的问题
12-01
在Vue.js应用中，`<keep-alive>`组件是一个非常有用的特性，它允许我们缓存组件的状态，使得在切换路由时能快速恢复之前的状态，从而提高用户体验。然而，在实际使用中，`<keep-alive>`可能会引发一些数据更新的问题...
vue组件 keep-alive 和 transition 使用详解
10-16
在Vue.js中，`keep-alive`和`transition`组件是两种非常重要的功能，它们分别用于组件的状态管理和过渡效果。 1. **`keep-alive`组件**：`keep-alive`的主要作用是缓存组件，使得组件的状态在切换时得以保留，避免...
keep-alive的作用和应用
m0_56698268的博客
03-22 2362
keep-alive的作用和应用
Vue Keep-alive使用
coldriversnow的专栏
09-19 1725
由于组件不支持v-if指令，所以我们在App.vue中采用两个的写法，通过当前路由的keepAlive字段来判断是否对页面进行缓存。假如有这样一个场景：我们当前所处在A组件，当我们跳转到B组件时（A组件被销毁，B组件被创建）当组件缓存之后，其他的生命周期不会走，但这个每次进去组件都触发，相当于。当组件缓存之后，其他的生命周期不会走，但这个每次离开组件都触发，相当于。但是，当我们又从B组件回到A组件时（B组件被销毁，A组件被创建。
vue中keep-alive的使用及详解
热门推荐
关注最新技术问题并持续维护更新
05-19 11万+
概念     keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 作用     在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性 原理     在 created 函数...
vue组件缓存之keep-alive正确使用姿势
越是安静内敛的人，越容易生不惊人死不休
06-06 6681
em...新的问题又出现了,由于 列表页被缓存了,这个时候我从首页,再点击进入某个列表，也不刷新了，完了，点击首页导航应该进入不同的列表页的. 也就是说，从首页进入列表组件不应该被缓存的。但是但是，我们的项目是用vue开发的webapp,多个组件共用一个窗口，当我们切换路由时，切出路由组件会销毁，所有列表页进入详情页列表页会销毁，重新回到列表页，列表页组件会重新加载。这样需求，如果是小程序的话，默认列表页就会缓存，因为小程序的运行环境是微信客户端，当我们打开一个页面会新建一个webview，
keep-alive属性及生命周期
qq_36262295的博客
12-23 9848
保留组件状态，避免重新渲染 include 字符串或正则表达式，只有名称匹配的组件会被缓存 exclude 字符串或正则表达式，任何名称匹配的组件都不会被缓存 max 数字，最多可以缓存多少组件实例 <keep-alive include="test-keep-alive"> //将缓存name为test-keep-alive的组件 <component></component> </keep-alive> <keep-alive includ
vue中keep-alive的详细讲解（建议收藏）
贫僧法号依平
01-20 6274
值，用其与新的缓存规则进行匹配，如果匹配不上，则表示在新的缓存规则下该组件已经不需要被缓存，则调用。发生了变化，即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化，那么就执行。设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。中缓存组件的数量是否超过了设置的最大缓存数量值。表明该组件还没有被缓存过，则以该组件的。缓存的组件被激活的时候，都会执行。
vue列表页面缓存 keep-alive，列表跳转详情页面，列表页面缓存
高山景行，一尘不染
03-23 1840
A页面 B页面：列表页面 C页面：详情页面 需求A页面跳转B页面时，B页面需要加载最新数据；C页面跳转B页面时，B页面的数据是A页面跳转到B页面的数据 代码： router-view： <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <rout...
Vue之keep-alive
seimeii的博客
05-18 2986
Vue之keep-alive
Vue中keep-alive的使用详解
qq_42357338的博客
08-16 2万+
1、概念： keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁。 2、作用： 用来缓存组件，避免多次加载相同的组件，减少性能消耗，提高用户体验。 3、使用方式: 方式一：在App.vue中使用keep-alive标签，表示缓存所有页面 <div id="app"> <keep-alive> <tar-bar></tar-bar> <div class="container">
Vue keep-alive
08-30
Vue 的 keep-alive 是一个抽象组件，用于在 Vue 中缓存动态组件，以便在切换时保留它们的状态。它可以有效地提高组件的性能，特别是在频繁切换的场景中。 使用 keep-alive 组件很简单，只需将需要缓存的组件包裹在 <keep-alive> 标签内。例如： ```html <keep-alive> <component :is="currentComponent"></component> </keep-alive> ``` 在这个例子中，currentComponent 是一个动态属性，通过更改该属性的值来切换不同的组件。使用 keep-alive 包裹的组件将会被缓存，以便在切换时保留其状态。 keep-alive 组件还提供了一些钩子函数，可以用于处理缓存组件的生命周期事件。常用的钩子函数包括 activated 和 deactivated。例如： ```javascript export default { activated() { // 在组件被激活时触发 }, deactivated() { // 在组件被停用时触发 }, } ``` 这些钩子函数可以用来在组件被缓存和被重新激活时执行一些逻辑操作。 总而言之，Vue 的 keep-alive 组件是一个非常有用的工具，可以提高组件的性能，并帮助我们轻松地实现组件的缓存和状态保持功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值