keep-alive（保证组件不被销毁）和activated、deactivated函数

最新推荐文章于 2024-09-24 18:36:20 发布
最新推荐文章于 2024-09-24 18:36:20 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46112274/article/details/123092243
版权
本文介绍了Vue中keep-alive组件的使用，它能保持组件状态，避免频繁销毁重建。激活和非激活生命周期钩子activated、deactivated在配合keep-alive时发挥作用。同时，通过组件内导航守卫记录离开时的路径，实现更智能的页面管理。此外，还提及了如何利用exclude属性排除特定组件如Profile和User不进行缓存。
摘要由CSDN通过智能技术生成

在这里插入图片描述

1、keep-alive保证组件不被销毁，具有缓存功能

  • keep-alive作用是当我们离开某个组件时，不要销毁组件，不要频繁的创建组件。保持组件是活着的状态。
  • 只有当使用了keep-alive时，才能使用activated、deactivated函数。
    在这里插入图片描述
    在这里插入图片描述

2、activated、deactivated函数在使用了keep-alive时才起作用

在这里插入图片描述

3、通过使用组件内的“导航守卫”在首页中使用path属性记录离开时的路径

在组件内部使用导航守卫

在这里插入图片描述

4、keep-alive两个属性的使用

表示Profile和User两个组件被排除再外，不做缓存。
在这里插入图片描述
Profile和User对应组件内的name值。
在这里插入图片描述

在这里插入图片描述

小码哥呀
关注
专栏目录
【前端 - Vue】之 Keep-Alive缓存组件使用语法及原理解析，超详细！
共同学习，共同成长
06-01 2466
keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。本篇讲解Keep-Alive缓存组件使用语法及原理解析，超详细！
vue 动态组件 创建 缓存 keep-alive 激活 activated deactivated
259的博客
12-22 734
vue 动态组件 创建 缓存 激活 keep-alive activated deactivated
vue中keep-alive和activated,deactivated
nanzhuhe的博客
03-20 905
created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次； 当页面存在keep-alive时，此时切换页面，页面不会刷新，那么如果想要页面重新渲染的话就要用到activated,deactivated activated,deactivated只有存在keep-alive时才会存在 ...
keep-alive用法以及activated,deactivated生命周期的讲解
Jana Jing的分享
06-24 2186
keep-alive include- 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max- 数字。最多可以缓存多少组件实例。 用法 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和相似，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在内被切换，它的activated和deactivated这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更...
Vue进阶（幺玖陆）：2024 Vue 生态全家桶
最新发布
IT全栈 华强工作室
09-24 1631
经过多年演进，Vue 已经构建了一个极为丰富且强大的生态系统，本文就来盘点 2024 年 Vue 开发最能打的技术组合！
keep-alive与activated、deactivated
林雨静
11-20 656
keep-alive与activated keep-alive 使用<component v-bind:is="currentTabComponent"></component>来切换不同的组件时，有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。这时就可以用 元素将其动态组件包裹起来。 <keep-alive> <component v-b...
keep-alive,activated,deactivated
weixin_44494811的博客
09-28 307
原文链接：https://www.jianshu.com/p/0272c0fe9392 要点： 1.当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 2.进入组件a时执行activated执行，离开时执行deactivated 3.keep-alive内的组件，（被缓存的组件），首次仅加载一次created和mouted ...
keepAlive和activated
weixin_48993611的博客
05-18 874
keepAlive和activated 解决问题：使用keepAlive时路由跳转参数改变页面不更新 keepAlive 包裹动态组件时会把组件缓存起来,避免重新渲染 //被keep-alive包含的组件会被缓存 <keep-alive> <component /> </keep-alive> keepAlive的三个属性：include、exclude、max exclude优先级高于include //只有路径匹配到的 name 为 a 组件会被缓存 &lt
使用vue-router切换组件时使组件不销毁
longtengg1的博客
07-15 7709
默认地，使用vue-router切换组件时，离开的组件会被销毁，新进入地组件会创建。 那么，有时候，我们希望离开的组件不要被销毁。这时就需要使用到keep-alive标签来缓存组件。 1、用keep-alive包裹router-view 在router-view标签外包裹keep-alive 使用v-if来判断一下，否则所有的组件都会销毁或者不销毁。判断的条件来自于路由定义时的meta字段 <keep-alive> <router-view v-if="$route.meta
vue组件 keep-alive 和 transition 使用详解
01-19
当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 include: 字符串或正则表达式。只有匹配的组件会被缓存。 exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。 ...
keep-alive和activated
OnceTheKing的博客
10-25 440
keep-alive可以缓存路由,请求相同时不再发送请求。 activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在。 当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发act...
keep-alive 用法 及activated,deactivated这两个生命周期函数
Yiu的博客
08-22 6685
keep-alive Props： include- 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max- 数字。最多可以缓存多少组件实例。 用法： <keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和<transition>...
keep-alive和activated的使用
qq_39053247的博客
11-18 563
(43条消息) vue中keep-alive、activated的探讨和使用_0斌果0的博客-CSDN博客 我们使用了keep-alilve缓存组件之后，在此切换到页面，就不会执行刷新，这个时候需要用到更新组件，那么就要用到，activated方法。 ...
Vue生命周期(keep-alive缓存特殊activated(组件激活时)、deactivated(组件停用时))、父子组件的执行顺序
muzidigbig的博客
01-16 3万+
随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。 一、什么是 vue 生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面是官网中的生命周期照片 二、生命周期函数 Vue 的生命周期主要共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/
Vue中keep-alive的用法以及activated,deactivated
weixin_43487782的博客
08-26 961
keep-alive的用法 在vue中切换组件的时候会自动销毁之前的组件，这样的话再切回之前的组件就要重新加载，数据什么的要重新请求接口，状态不能保留。 如图，从任务切换到缺陷，任务的列表就被销毁了，再次切到任务会重新加载组件。 <keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 在路由中可以在meta中设置需要被缓存的组件。 import Vue from 'vue' import Router from 'vue-router' V
vue使用keep-alive实现多组件嵌套中个别组件存活不销毁
m0_46627730的博客
10-20 1566
前言 最近在做一个精品课程后台管理系统，其中涉及文件上传和文件列表展示，我不想将他们写入一个组件，故分开两个组件实现，但由于上传文件需要时间，这时要是用户切换别的组件查看时，上传文件组件就销毁了，导致文件上传失败，所以需要采取keep-alive技术实现不销毁上传文件组件，同时也由于系统模块较多，所以需要多组件进行嵌套。 问题：多组件嵌套下如何指定对应的一个或多个组件存活呢？ *tips：要是对于Vue使用keep-alive的基本用法不熟悉的也可以点击查看vue使用keep-alive的基本用法 配置路由
vue中keep-alive、activated的探讨和使用
qq_38861711的博客
08-02 3万+
在修改公司的一个项目的时候发现了activated这个东西，一直觉得很疑惑，之前也没怎么用过啊！官网的生命周期那也没说过这东西啊！生命周期不就create mount update 和destory这几个东东么，怎么多了个activate出来。 百思不得其解，于是去问了下度娘和查了下文档！恍然大悟，原来这东东是结合keep-alive这东东使用的，下面顺便记录一下。   keep-ali.........
actived生命周期_vue keep-alive以及activated,deactivated生命周期的用法
weixin_39879219的博客
12-19 758
转载：https://www.jianshu.com/p/0272c0fe9392vue官网的描述： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。通过描述我们知道，它会缓存不活动的组件，...
keep-alive结合activated,deactivated的用法
weixin_43550562的博客
07-26 419
记住，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中， activated 中的不管是否需要缓存都会执行。注意一点：activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在。<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。当再次进入（前进或者后退）时，只触发activated。当引入keep-alive的时候，页面第一次进入，
vue学习总结六：keep-alive用法以及activated,deactivated生命周期的讲解
热门推荐
Buddha_ITXiong的博客
07-16 6万+
注意：项目讲解案例参照之前的博客，如有不理解的地方，请按vue学习总结顺序查看。 如果从头到尾仔细阅读过我之前博客的朋友可能发现，我在讲vue生命周期的时候并没有详细的去讲activated以及deactivated这两个生命周期函数，在接下来的这篇博客中会为大家揭开它的神秘面试。 我会把列表页好详情页的数据替换成动态请求的数据，而不是写死在data函数里面，当然因为没有接口，我只能通过本地的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值