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…

PaddleDetection快速体验quick_start

1 快速体验 # 设置显卡 export CUDA_VISIBLE_DEVICES0# 用PP-YOLO算法在COCO数据集上预训练模型预测一张图片 python tools/infer.py -c configs/ppyolo/ppyolo_r50vd_dcn_1x_coco.yml -o use_gputrue weightshttps://paddledet.bj.bcebos.com/models/ppyolo_r50vd_dcn_1x_coc…

针对oracle系列数据库慢数据量大的问题

-- 确保索引存在 create index idx_risk_assessment_hazard on risk_assessment_hazard(data_time, perception_id); create index idx_risk_dispose_base_info on risk_dispose_base_info(perception_id); -- 使用并行查询和with子句进行优化 explain plan for with t2 as (se…

官宣!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…

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

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

ViewModel、Lifecycles、LiveData基本使用

以下是使用Java实现ViewModel、Lifecycles和LiveData的基本用法,以及它们的原理简述。 ViewModel的基本使用(Java) 1. 引入依赖 在你的build.gradle文件中添加以下依赖: implementation androidx.lifecycle:lifecycle-viewmod…

MySQL查询性能优化解决方案

解决方案 主键与默认常用查询字段建立索引,普通字段类型选择 UNIQUE,索引方法 BTREE ;长文本使用 FULLTEXT,索引方法为无; 新建表时引擎默认设置为 MyISAM,不使用 InnoDB,因为 MyISAM 支持 MAT…

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

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

拆分shp数据要素为多个shp

我有一个各县shp文件,我想要拆分成不同的要素,命名根据NAME字段进行命名,字段值是字符串,以下为基于arcpy的python实现代码。(python2.7) import arcpy import os# 设置工作空间和输入的 shapefile 文件路…

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 新服务器…

Webrtc支持FFMPEG硬解码之Intel(一)

前言 此系列文章分分为三篇, Webrtc支持FFMPEG硬解码之Intel(一)-CSDN博客 Webrtc支持FFMPEG硬解码之NVIDA(二)-CSDN博客 Webrtc支持FFMPEG硬解码之解码实现(三)-CSDN博客 AMD硬解目前还没找到可用解码器,欢迎留言交流 环境 Windows平台 VS20

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;方法改了又改&…

算法第9章 图算法设计

7-1 旅游规划 #include <iostream> #include <algorithm> #include <cstring> using namespace std; typedef pair<int,int> PII; const int N 510; int g[N][N]; int n,m,s,d; int dist[N]; int w[N],t[N][N]; bool st[N]; void dijkstra(){ memset…