<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. element select多选选项卡页面抖动问题

    最近做项目是有个功能需要下拉框多选,然后碰到了一个问题就是选择选项的时候出现频繁抖动的情况 问题描述: 页面选择到三个选项时长度为三的时候就会开始抖动,其他长度没有问题,检索elements是发现选择 ...

  2. 【python】第一模块 步骤五 第一课、内存管理机制

    第一课.内存管理机制 一.课程介绍 1.1 课程概要 课程概要 赋值语句的内存分析 垃圾回收机制 内存管理机制 课程目标 掌握赋值语句内存分析方法 掌握id()和is()的使用 了解python的垃圾 ...

  3. grub-mkrescue:错误: `mformat` invocation failed

    跟着兴业视频做操作系统的时候遇到了这个问题 解决方法: sudo apt-get install mtools 参考: (40条消息) vs code连接远程Ubuntu编写操作系统,grub-mkr ...

  4. redis面试题汇总

    1redis持久化机制 redis是一个支持持久化的内存数据库,通过持久化机制把内存中的数据同步到硬盘文件来保证数据持久化,当redis重启后通过把硬盘文件重新加载到内存,就能达到恢复数据的目的 2缓 ...

  5. div 自动滚轮2

    HTML: <div class="cal_bottom" style="height:78%;margin-top:2%;overflow:auto;" ...

  6. mitudesk的pytorch基础

    pytorch定义张量的方法和Numpy差不多 2. 标量才能对张量求导,代表其在各个方向上的偏导数,结果是一个张量 3. 在pyt中张量可以对张量求导,前提条件是求导时传一个1,1,1,1,进去,其 ...

  7. laravel5.5 数据查询记录

    laravel5.5版本数据查询 基于 prettus/l5-repository 插件 首先安装好 prettus/l5-repository插件 配置相关参数 1 根据条件查询数据总数 publi ...

  8. Linux cut和磁盘

    cut cut 选项: cut -d 指定分隔符 (awk -F) cut -f 数字,取第几列 –f3,6三列和6列 3-6(3到6行) cut -c 按字符取(空格也算) 指定冒号为分隔符,取第一 ...

  9. Java基础进阶内容 - 随笔

    JAVA进阶 1 对象序列化 1.1 对象要序列化要实现Serializable接口 1.2 然后通过ObjectInputStream 对象读入流来读入一个对象 new ObjectOutputSt ...

  10. c# 一些方法记录

    // 返回当前目录的路径 fileName = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "当前目录下的一个文件"); ...