<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. vue后台管理系统——订单管理模块

    电商后台管理系统的功能--订单管理模块 1. 订单管理概述 订单管理模块用于维护商品的订单信息, 可以查看订单的商品信息.物流信息,并且可以根据实际的运营情况对订单做适当的调整. 2. 订单列表 在c ...

  2. 浙大版《C语言程序设计(第3版)》题目集 练习3-3 统计学生平均成绩与及格人数 (15 分)

    练习3-3 统计学生平均成绩与及格人数 (15 分) 本题要求编写程序,计算学生们的平均成绩,并统计及格(成绩不低于60分)的人数.题目保证输入与输出均在整型范围内. 输入格式: 输入在第一行中给出非 ...

  3. c# 串口 转发到 TCP 客户端

    前言 对于数据流Stream的转发.在.net 3.5之后的版本只需要 stream.CopyTo(stream). 目前只是为了方便调用测试,花了一点点时间做了一个简单的调用demo 完整代码 us ...

  4. IDEA移除Maven依赖的方法

    参考地址:https://blog.csdn.net/weixin_45654405/article/details/124415010 方法一: 如果不行,则进行下一步: 尝试在project St ...

  5. Vant+小程序+购物车实例

    图片实例,看是否是您所需要的喔.... 扫码小程序可看实例操作,有啥问题也可扫码加群,很希望可以帮助到你喔!           HTML部分: <view class="cart&q ...

  6. Chorme 兼容

    Chorme自动更新,不知道什么时候版本 就变了.之前好用的代码,突然不好用了. 启动时提示Only local connections are allowed 检查一下兼容性参照下文,下载对应的Dr ...

  7. 解决黑苹果macOS Monterey系统无法正常睡眠、睡眠无法唤醒,唤醒后显示器无输出问题

    1.解决无法睡眠问题:添加睡眠补丁:HibernationFixup.kext, 或者添加ssdt:ssdt-GPRW.aml,并在ACPI补丁中添加热补丁: 2.解决睡眠后无法唤醒.唤醒后显示器无输 ...

  8. jmeter 变量的使用

    jmeter添加变量 一.添加用户自定义变量 添加用户自定义变量 作用:常用数据参数化.当变量发生变化时,不需要逐个脚本修改,只需要修改用户自定义中的变量就可以了. 变量使用如下图 二.函数助手定义变 ...

  9. hi,docker,docker的介绍

    一.docker的介绍 1.什么是docker: docker是一种虚拟化技术,小型的系统环境(linux)2.虚拟化技术: 在计算机中用例管理虚拟资源的一种手段 内存管理.软件虚拟化.硬件虚拟化(磁 ...

  10. Unity 2D Sprite 俯视角渲染顺序设置

    今天结合网上的一个教程复习了一下Unity中2D俯视角游戏的渲染顺序设置. 首先是在Hierachy中的摆放顺序,靠下的物体渲染顺序靠后: 然后是Sprite Renderer组件,可以通过组件中的S ...