vue 生命周期 钩子函数 keep-alive activated deactivated

一、activated + deactivated

在被keep-alive包含的组件/路由中,会多出两个生命周期的钩子:activated 与 deactivated。在 2.2.0 及其更高版本中,activated 和 deactivated 将会在树内的所有嵌套组件中触发。activated在组件第一次渲染时会被调用,之后在每次缓存组件被激活时调用。

1.activated调用时机

第一次进入缓存路由/组件,在mounted后面,beforeRouteEnter守卫传给 next 的回调函数之前调用:

beforeMount=> 如果你是从别的路由/组件进来(组件销毁destroyed/或离开缓存deactivated)=>mounted=> activated 进入缓存组件 => 执行 beforeRouteEnter回调因为组件被缓存了,再次进入缓存路由/组件时,不会触发这些钩子:
// beforeCreate created beforeMount mounted 都不会触发。

所以之后的调用时机是:

组件销毁destroyed/或离开缓存deactivated => activated 进入当前缓存组件 => 执行 beforeRouteEnter回调
// 组件缓存或销毁,嵌套组件的销毁和缓存也在这里触发

2.deactivated调用时机

deactivated会在组件被停用(离开路由)时调用。
使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁),因为组件没被销毁,被缓存起来了。
这个钩子可以看作beforeDestroy的替代,如果你缓存了组件,要在组件销毁的的时候做一些事情,你可以放在这个钩子里。
如果你离开了路由,会依次触发:

组件内的离开当前路由钩子beforeRouteLeave => 路由前置守卫 beforeEach =>全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)

如果离开的组件没有缓存的话 beforeDestroy会替换deactivated
如果进入的路由也没有缓存的话 全局后置钩子afterEach=>销毁 destroyed=> beforeCreate等

 参考

 详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)

二、八大生命周期 + keep-alive(activated 和 deactivated)

Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。下面是官网中的生命周期照片 

请添加图片描述

Vue 的生命周期主要共分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后;还有keep-alive 缓存特殊的两个阶段(activated(组件激活时)、deactivated(组件停用时));每次进入都会执行钩子中的函数。

1、beforeCreate(创建前)

2、created(创建后)

3、beforeMount(挂载前)

4、mounted(挂载后)

5、beforeUpdate(更新前)

6、updated(更新后)

7、beforeDestory(销毁前)

8、destoryed(销毁后)

keep-alive 缓存特殊的两个阶段:

1、activated(组件激活时):该钩子在服务器端渲染期间不被调用。

被 keep-alive 缓存的组件激活时调用。初始化操作放在actived里面

2、deactivated(组件停用时):该钩子在服务器端渲染期间不被调用。

被 keep-alive 缓存的组件停用时调用。在deactived里面,在里面进行一些善后操作

添加keep-alive标签后会增加activated和deactivated这两个生命周期函数,初始化操作放在actived里面,一旦切换组件,因为组件没有被销毁,所以它不会执行销毁阶段的钩子函数,所以移除操作需要放在deactived里面,在里面进行一些善后操作,这个时候created钩子函数只会执行一次,销毁的钩子函数一直没有执行。

设置了 keep-alive 缓存的组件,会多出两个生命周期钩子(activated与deactivated):

首次进入组件时:beforeRouteEnter > beforeCreate > created> mounted > activated > ... ... > beforeRouteLeave > deactivated

再次进入组件时:beforeRouteEnter >activated > ... ... > beforeRouteLeave > deactivated

每个周期适合的场景

beforecreate : 可以在这加个loading事件,在加载实例时触发
created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用
mounted : 挂载元素,获取到DOM节点
updated : 如果对数据统一处理,在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框、清除定时器
nextTick : 更新数据后立即操作dom

Vue生命周期(keep-alive缓存特殊activated(组件激活时)、deactivated(组件停用时))、父子组件的执行顺序_vue activated-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/852321.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

kafka 快速上手

下载 Apache Kafka 演示window 安装 编写启动脚本,脚本的路径根据自己实际的来 启动说明 先启动zookeeper后启动kafka,关闭是先关kafka,然后关闭zookeeper 巧记: 铲屎官(zookeeper)总是第一个到,最后一个走 启动zookeeper call bi…

2024 Idea最新激活码

idea的激活与安装 操作如下: ① 打开网站:https://web.52shizhan.cn 切换到:激活码,点击获取 ② 这个时候就跳转到现成账号页面,点击获取体验号,如图 ③ 来到了获取现成账号的页面了。输入你的邮箱账号即…

Flutter笔记:关于WebView插件的用法(上)

Flutter笔记 关于WebView插件的用法(上) - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:htt…

官宣!2024影响因子即将公布,或将迎来这些重大变化!

【SciencePub学术】IF是Impact Factor,即我们俗称的“影响因子”,是衡量学术期刊一个重要性的指标。它通过计算期刊上发表的文章在特定时间内被引用的平均次数来评估期刊的影响力。 影响因子计算公式 影响因子(IF)(期…

vue3实战练习之红包雨,抢红包案例

抢红包案例 每当618消费节到来时,某宝、某多,等购物网站都会退出各种活动,其中抢红包,优惠券等红包雨活动很是火热,于是就通过vue的知识来做一个红包雨,抢红包加分活动!代码中红包的路径改成自己…

2024年人工智能与云计算国际会议(ICAICC 2024)

2024 International Conference on Artificial Intelligence and Cloud Computing 【1】大会信息 大会时间:2024-07-19 大会地点:中国长沙 截稿时间:2024-07-05(以官网为准) 审稿通知:投稿后2-3日内通知 会议官网&am…

看完“土猪拱白菜“的张锡峰,我明白计算机有多难了

计算机有多难? 今天无意中,看到一篇关于「"土猪拱白菜"学霸后悔报考浙大计算机」的文章。 或许会有不少和我刚开始一样懵圈的同学:张锡峰是谁?"土猪拱白菜"又是什么梗? 带着疑惑,我打开…

Tita 360评估:有效 360度反馈流程的 10 大步骤

宣传过程 如果你的公司首次引入多方位反馈或 360 度反馈,那么向所有利益相关者描述这一流程至关重要。由于流程太新,很多人还不了解。确保参与该流程的每个人都了解其目的,以及将如何实施该流程和使用其结果。花时间在一对一会议、小组会议和…

python的a[:2]、a[:] 和a [::] 的区别

一、a[:2] 数据准备 import numpy as np X np.array([[0,1],[2,3],[4,5],[6,7],[8,9],[10,11],[12,13],[14,15],[16,17],[18,19]]) print(X)形成矩阵 print (“X[: 2]:”, X[: 2]) ### :表示索引 0至1行; 二、a[:]和a [::] 在 Python 中,[:] 和 [::…

SQL Server 安装后,服务器再改名,造成名称不一致,查询并修改数据库服务器真实名称

SELECT SERVERNAME -- 1.查询旧服务器名称 SELECT serverproperty(servername) AS new --2.查询新服务器名称 -- 3.更新服务器名称 IF SERVERPROPERTY(servername) <> 新服务器名称替换 BEGIN DECLARE server_name NVARCHAR(128) SET server_name 新服务器…

Linux部署项目

手动部署 1.在IDEA写一个有关springboot项目 在windows客户端可以通过localhost:8080/hello 访问 2.用packge 命令将该springboot项目打包 并在target目录下找到打包的jar包 3.上传到linux上 个人习惯在usr/local/app 下上传该项目 创建切换到app目录下 mkdir /usr/local/ap…

无文件落地分离拆分-将shellcode从文本中提取-file

马子分为shellcode和执行代码. --将shellcode单独拿出,放在txt中---等待被读取执行 1-cs生成python的payload. 2-将shellcode进行base64编码 import base64code b en_code base64.b64encode(code) print(en_code) 3-将编码后的shellcode放入文件内 4-读取shellcod…

记录pytest中场景执行的token异常处理问题

前言中写了一个conftest钩子函数用于处理重复调用token的方法&#xff0c;http://t.csdnimg.cn/N4rCK&#xff0c;每个用例单独执行都很正常&#xff0c;但是批量执行时一直报错&#xff0c;token缓存处理也不生效。 所有的用例都报获取不到token&#xff0c;方法改了又改&…

C++和C语言到底有什么区别?

引言&#xff1a;C和C语言是两种非常常见的编程语言&#xff0c;由于其广泛的应用和灵活性&#xff0c;它们在计算机科学领域内受到了广泛的关注。虽然C是从C语言发展而来的&#xff0c;但是这两种语言在许多方面都有所不同。本文将对C和C语言进行比较和分析&#xff0c;以便更…

Modbus通信协议(1)--基础知识

一、基础知识 1.信息的划分 2.基本概念 3.机器数和真值 4.原码、反码与补码 5.存储单位 6.基本类型数据 7.数的浮点表示 8.各种进位制的对比 9.十进制 10.二进制 11.十六进制 12.不同进制的换算 13.位的标记 二、常用的信息编码 1.西文字符的计算机表示 2.汉字处理过程 3.汉字…

如何用ai写文案?分享方法和软件!

在当今数字化时代&#xff0c;内容创作已经成为各行各业不可或缺的一部分。然而&#xff0c;对于许多创作者来说&#xff0c;如何写出既具有吸引力又符合平台特点的文案&#xff0c;却是一项不小的挑战。幸运的是&#xff0c;人工智能&#xff08;AI&#xff09;技术的快速发展…

解决使用elmessage 没有样式的问题

错误情况 这里使用了一个消息提示&#xff0c;但是没有出现正确的样式&#xff0c; 错误原因和解决方法 出现这种情况是因为&#xff0c;在全局使用了按需导入&#xff0c;而又在局部组件中导入了ElMessage组件&#xff0c;我们只需要将局部组件的import删除就可以了 import…

uniapp 仿写弹窗

页面 <template><view click"close" class"mask"><view click.stop"onClick" class"content"><text class"text">点击蒙层关闭</text></view></view> </template><scr…

江协科技51单片机学习-0 购买套件

前言&#xff1a; 本文是根据哔哩哔哩网站上“江协科技51单片机”视频的学习笔记&#xff0c;在这里会记录下江协科技51单片机开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了江协科技51单片机教学视频和链接中的内容。 引用&#xff1a; 51单片机入门教程-2…

Blender雕刻建模_UV展开

UV展开的标准&#xff1a;展平&#xff0c;不重叠&#xff0c;均匀展开 ZenUV插件 切到边模式 -Mark&#xff0c;标记缝合边 -Unmark&#xff0c;取消标记 -Unmark All&#xff0c;全部取消标记 -Mirror Seams&#xff0c;镜像缝合边 -Zen Unwrap&#xff0c;全部展开 纹…