vue中keep-alive组件

最新推荐文章于 2024-08-16 23:32:06 发布
最新推荐文章于 2024-08-16 23:32:06 发布
阅读量119 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42178670/article/details/127913522
版权

vue中keep-alive组件

1、介绍

keep-alive是vue内置组件，keep-alive包裹动态组件component时，会缓存不活动的组件，而不是销毁，在组件切换的时候将状态保留在内存中，防止重复渲染DOM

2、属性

可以通过include/exclude指定组件名的方式指定需要被缓存或者被排除的组件，include/exclude可以直接直接传入英文逗号分隔的字符串，也可以使用v-bind绑定正则表达式或数组
max：指定最大缓存数

3、vue2和vue3的区别

结合vue-router时，在vue3中时router-view包裹keep-alive，而在vue2中是keep-alive包裹router-view

4、缓存后如何获取数据

方案一：使用组件内的路由守卫beforeRouteEnter，因为进入路由前都会触发路由导航守卫
方案二：使用actived钩子，因为在keep-alive缓存的组件被激活的时候都会触发actived钩子

给贝贝赚口粮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中keep-alive组件的入门使用教程
12-10
Vue.js中的`<keep-alive>`组件是一种非常实用的功能，用于在组件切换过程中保持组件的状态，避免每次切换都重新创建和销毁组件实例。这在处理需要维持数据或状态的复杂应用时尤其有用，例如音乐播放应用中保持播放...
vue组件缓存之keep-alive正确使用姿势
关注我！带你一路 "狂飙" 到底！
02-24 3058
先来看一个项目中的需求 作为苦逼的前端开发者，我们无时无刻都要面对产品经理提的各种需求, 比如下图这个场景 场景： 从首页的点击导航进入列表页, 列表页点击列表进入 该 数据详情页 从详情页返回，希望列表页缓存，不重新渲染数据，这样会提高用户体验。 分析一下 这样需求，如果是小程序的话，默认列表页就会缓存，因为小程序的运行环境是微信客户端，当我们打开一个页面会新建一个webview， 所有列表页和详情页是两个webview，当我们进入详情页，列表页webview，只是会在详情页web
路由缓存 keep-alive
汤迷的博客
03-29 1163
备注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 一致， 这样的目的是为了后...
vue中keep-alive、activated的探讨和使用
qq_38861711的博客
08-02 3万+
在修改公司的一个项目的时候发现了activated这个东西，一直觉得很疑惑，之前也没怎么用过啊！官网的生命周期那也没说过这东西啊！生命周期不就create mount update 和destory这几个东东么，怎么多了个activate出来。 百思不得其解，于是去问了下度娘和查了下文档！恍然大悟，原来这东东是结合keep-alive这东东使用的，下面顺便记录一下。   keep-ali.........
vue项目中keep-alive的使用，从详情页返回列表时保存浏览位置
weixin_34396902的博客
06-26 1469
背景描述： 最近在做移动端前端项目中，需要实现以下场景： 1.在页面查询列表，进入详情页时，返回需要页面返回到上次浏览的位置 2.由于查询列表获取的数据可能会短时间改变，如果前端长时间缓存数据，并不符合业务要求。 3.我在进入详情页时可以修改列表的数据，返回时滚动到，用户看到的应该是最新的数据 4.每个列表页面需要用到滑动加载更多数据。 项目中vue的使用： 1.用到keep-alive来缓存页面...
keep-alive的使用
An滴饭儿的博客
12-23 240
keep-alive是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 keep-alive内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 keep-alive 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染。 keep-alive的生命周期 初次进入时：created > mounted > acti
Vue中keep-alive组件作用详解
10-15
Vue.js 是一款流行的前端框架，它提供了一个名为 `<keep-alive>` 的特殊组件，用于在应用中实现组件的状态保留和避免不必要的重新渲染，从而优化性能。`<keep-alive>` 主要适用于那些需要频繁切换但状态需要保持的...
vue keep-alive 动态删除组件缓存的例子
10-16
根据提供的文件信息，以下是关于Vue中keep-alive组件缓存动态删除的知识点详细说明： 首先，什么是Vue中的keep-alive组件呢？keep-alive是Vue提供的一个抽象组件，它主要用于缓存动态组件，避免组件切换过程中导致...
Vue中keep-alive组件的深入理解
10-14
Vue中的`<keep-alive>`组件是一个特殊类型的组件，用于在Vue应用中缓存组件实例，避免组件在切换路由或状态变化时被销毁并重新创建。这有助于保持组件的状态，提高用户体验，尤其是在处理大量数据或者频繁切换的组件...
Vue中KeepAlive 原理与源码分析
发果叁
10-30 1021
keep-alive组件的作用类似于 HTTP 中的持久链接。它可以避免组件实例不断地被销毁和重建。keep-alive的实现并不复杂。当被keep-alive的组件在卸载的时候，渲染器并不会真的将其卸载，而是会将该组件搬运到一个隐藏的容器中，从而使得组件可以维持当前状态。当被keep-alive的组件再次被 “挂载” 时，渲染器也不会真的挂载它，而是将它从隐藏容器中搬运到原容器。最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。
vue学习总结六：keep-alive用法以及activated,deactivated生命周期的讲解
热门推荐
Buddha_ITXiong的博客
07-16 6万+
注意：项目讲解案例参照之前的博客，如有不理解的地方，请按vue学习总结顺序查看。 如果从头到尾仔细阅读过我之前博客的朋友可能发现，我在讲vue生命周期的时候并没有详细的去讲activated以及deactivated这两个生命周期函数，在接下来的这篇博客中会为大家揭开它的神秘面试。 我会把列表页好详情页的数据替换成动态请求的数据，而不是写死在data函数里面，当然因为没有接口，我只能通过本地的...
Vue路由开启keep-alive时的注意点
大灰狼的小绵羊哥哥的博客
03-15 1万+
这个不是业务的要求，但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM，觉得作为一个前端工程师有必要优化下的加载逻辑，正好vue提供了 keep-alive 的功能，所以就试用了下。当然，干任何事儿都不会一帆风顺的，在路上的磕磕碰碰在所难免，故在此记录下遇到的问题，希望看到这篇文章的人能有所帮助。ps：这个也没多难。 HTML部分： template> div class="
vue中的keep-alive的入坑指南
wangk_的博客
06-15 1万+
最近有个变态需求：重新点击路由导航时刷现当前路由页面，该路由页面是一个列表页面，点击详情的时候跳转详情页面，详情页面返回列表页面时，使用缓存的列表页面。    实现步骤：    1.使用keep-alive缓存路由页面    2.网上的找到的方法实现点击路由导航刷新当前路由：         通过 v-if控制，重写点击导航的事件，代码如下：下面是reload方法：总结要点：    1.v-if判...
Vue——使用内置组件Keep-alive
qq812457115的博客
07-05 289
1. 在app.vue中加入组件 2. keep-alive 属性3. 例子
vue组件化开发——keep-alive组件
weixin_47450807的博客
02-10 428
一、小案例 如上图所示，Home组件的状态当进行切换时，是无法进行保存的，也就是说当每一次进行切换时，该组件都会重新销毁，然后重新创建，这样导致效率太低。此时出现keep-alive组件，该组件中当切换时，不会导致组件销毁。 二、keep-alive组件的属性 keep-alive组价属性存在三个,分别为include,exclude,max,下面将详细说一下三个的具体使用。 include:String | RegExp | Array，就是规定组件满足什么条件才可以进行缓存。 exclude:St
vue中使用keep-alive进行组件缓存（解决组件不缓存问题）
pipizhou16的博客
07-28 7666
vue中使用keep-alive进行组件缓存（解决组件不缓存问题）
vue中缓存组件keep-alive
Celester_best的博客
06-23 3783
keep-alive相关介绍、keep-alive的使用、include和exclude的说明和使用，keep-alive相关的生命周期
11.动态标签页的一些优化和bug的解决
最新发布
qq_55121347的博客
08-16 275
动态标签页的一些优化和bug的解决
详细介绍 Vue3 的 watch 和 watchEffect
weixin_52648900的博客
08-15 965
非常详细介绍了vue3的watch和watchEffect区别和联系
实现父组件调用子组件方法时报错：[Vue warn]: Invalid vnode type when creating vnode: null.
08-14 371
[Vue warn]: Invalid vnode type when creating vnode: null.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值