<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. 【批量下载】url——wget,给定网址,批量下载文件

    写在前面:最近在学习批量下载sci文章并传入noteexpress,从网上学来了一些方法,其中有一步需要使用url将sci-hub上面的文章批量下载下来. 学习网址:[研究生]快速批量下载 Web o ...

  2. java为什么要使用静态内部类

    参考:https://blog.csdn.net/fengyuyeguirenenen/article/details/122696650 static内部类意味着: (1) 为创建一个static内 ...

  3. 【编程】Python3 使用自定义编码字符表解密Base64数据

    前言 Python提供了"base64"模块用于编码.解码Base64数据.但是并不是所有的Base64数据都会使用默认的字符表进行编码,所以这里对Python下实现自定义编码字符 ...

  4. win10 系统 腾讯云服务器 部署网站 并进行访问

    1.首先需要一个服务器 我是用的Windows系统 我用的是腾讯云的服务器(因为便宜) 然后给服务器重置密码 然后用重置后的密码 用户名 用远程桌面连接登录试试 远程桌面连接成功 然后回到服务器网站 ...

  5. C#下解析、生成JAVA的RSA密钥、公钥

    1.从 https://www.nuget.org/packages/BouncyCastle/下载对应的nupkg包,放到本地一个文件夹中 2.打开VS2010,工具->NuGet程序包管理器 ...

  6. JMeter控制器遍历一组数据

    1.获取数据列表,通过JSON提取器提取所有name信息 获取到的name总条数 = name_matchNr = 4 2.通过添加控制器遍历一组数据 2.1 方式一:添加循环控制器 循环控制次数为 ...

  7. ADB 命令 使用

    基本用法 命令语法 为命令指定目标设备 启动/停止 查看 adb 版本 以 root 权限运行 adbd 指定 adb server 的网络端口 设备连接管理 查询已连接设备/模拟器 USB 连接 无 ...

  8. 3.1命名空间的using声明

    目前为止,我们用到的库函数基本上都属于命名空间std,而程序也显式地将这一点标示了出来.列如,std::cin表示从标准输入中读取内容.此处使用作用域操作符(::)的含义是:编译器应从操作符左侧名字所 ...

  9. R grep

    SAIN<-FAIN[grepl("HE-H$",FAIN$rDD),,drop=TRUE]

  10. commons-lang3

    字符串的处理类(StringUtils) //判断是否为空(注:isBlank与isEmpty 区别) StringUtils.isBlank(null);StringUtils.isBlank(&q ...