<keep-alive>包裹的动态组件会被缓存,它是一个抽象组件,它自身不会渲染一个dom元素,也不会出现在父组件链中。当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

如<keep-alive>包裹两个组件:组件A和组件B。当第一次切换到组件A时,组件A的created和activated生命周期函数都会被执行,这时通过点击事件改变组件A的文字的颜色,在切换到组件B,这时组件A的deactivated的生命周期函数会被触发;在切换回组件A,组件A的activated生命周期函数会被触发,但是它的created生命周期函数不会被触发了,而且A组件的文字颜色也是我们之前设置过的。

建议参考:https://www.cnblogs.com/mary-123/p/11248178.html

里面详细的写了在项目中使用keep-alive的方法。

vue使用keep-alive出现的的activated和deactivated生命周期的更多相关文章

  1. vue 源码详解(二): 组件生命周期初始化、事件系统初始化

    vue 源码详解(二): 组件生命周期初始化.事件系统初始化 上一篇文章 生成 Vue 实例前的准备工作 讲解了实例化前的准备工作, 接下来我们继续看, 我们调用 new Vue() 的时候, 其内部 ...

  2. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

  3. Blazor和Vue对比学习(进阶2.1.1):生命周期,基本理解和使用

    一.基本理解 首次接触"生命周期"这个名词,是比较晦涩的,Vue中又有生命周期钩子,而Blazor则是虚方法重写,容易蒙.所以,我尝试从初学者的角度来阐述一下. 1.我们在基础部分 ...

  4. keep-alive用法及(activated,deactivated生命周期)

    <template> <div id="app"> <!-- <img src="./assets/logo.png"> ...

  5. Vue.js 源码分析(九) 基础篇 生命周期详解

    先来看看官网的介绍: 主要有八个生命周期,分别是: beforeCreate.created.beforeMount.mounted.beforeupdate.updated   .beforeDes ...

  6. vue学习笔记(四)——Vue实例以及生命周期

    1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) |   |-------el (提供一个在页面上已存在的 DOM 元素作为 V ...

  7. vue的生命周期和路由守卫

    组件相关钩子函数: beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destoryed   还有 ...

  8. vue实例以及生命周期

    1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) |   |-------el (提供一个在页面上已存在的 DOM 元素作为 V ...

  9. Vue源码学习(二)——生命周期

    官网对生命周期给出了一个比较完成的流程图,如下所示: 从图中我们可以看到我们的Vue创建的过程要经过以下的钩子函数: beforeCreate => created => beforeMo ...

  10. Vue生命周期钩子---3

    vue生命周期流程图:4张图 : 生命周期的解析和应用: Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue ...

随机推荐

  1. Django 介绍及环境准备

    Django介绍: Django(发音:[`dʒæŋɡəʊ])是基于Python的Web框架,它是开源的,免费的. Django使构建更好的web应用程序变得更容易.更快.代码更少 django的MT ...

  2. mangodb查询语句

    1.查询所有记录 db.userInfo.find(); 相当于: select* from userInfo; 默认每页显示20条记录,当显示不下的情况下,可以用it迭代命令查询下一页数据.注意:键 ...

  3. DorisSQL与MySQL函数对照 差异篇

    ## 1.日期函数### 时区.```mysql -> convert_tz(dt,from_tz,to_tz)doris -> CONVERT_TZ(DATETIME dt, VARCH ...

  4. 廖雪峰JS知识点整理——快速入门

    基本语法 1.每个语句以:结尾. 2.单行注释://... 3.多行注释:/*... ...*/ 数据类型和变量 运算 1.==自动转换数据类型在比较,不推荐使用 2.===不会转换数据类型,推荐使用 ...

  5. c++学习3 转义字符

    一 "/"和某些字符的结合,产生新的字符就叫转义字符. '\0'==ASCII码值的"0". '\n'==换行符. '\t'==tab缩进符. '\a'==发出 ...

  6. Jmeter六、采样器解析

    一.HTTP request sampler 默认端口:80 协议protocol:http,https,file 参数中有特殊字符,勾选编码encode send files with reques ...

  7. Redis Template部分接口学习记录

    Redis Template是操作redis的一个封装模板,让我们更加简便的去操作redis. 操作键类型的接口: GeoOperations Redis的地理空间操作,如GEOADD,GEORADI ...

  8. PLC入门笔记3

    熟悉开发环境 工具下载 官网失效 软件安装 官网失效 第一次PLC之旅 走廊灯两地控制案例 PLC型号确定 梯形图(LAD)和指令表(STL)两种编程方式 程序编辑 符号 变量类型 数据类型 注释 编 ...

  9. CATIA的后处理

    同其他的cam软件一样,catia可以使用配置好的后处理文件输出相应的G代码文件, 也可以输出相应的刀位文件. 下图中的1选择的是后处理文件:下图2种设置的是输出刀位文件的格式. 输出G代码: 选择[ ...

  10. Linux命令之定时调度-crontab

    以上cron命令格式为:* * * * * [root run-parts] command 前面五个*号代表时间,用数字,数字的取值范围和含义如下: 第一个*:分钟 (0-59)[整数] 第二个*: ...