vue使用keep-alive出现的的activated和deactivated生命周期
<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生命周期的更多相关文章
- vue 源码详解(二): 组件生命周期初始化、事件系统初始化
vue 源码详解(二): 组件生命周期初始化.事件系统初始化 上一篇文章 生成 Vue 实例前的准备工作 讲解了实例化前的准备工作, 接下来我们继续看, 我们调用 new Vue() 的时候, 其内部 ...
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
- Blazor和Vue对比学习(进阶2.1.1):生命周期,基本理解和使用
一.基本理解 首次接触"生命周期"这个名词,是比较晦涩的,Vue中又有生命周期钩子,而Blazor则是虚方法重写,容易蒙.所以,我尝试从初学者的角度来阐述一下. 1.我们在基础部分 ...
- keep-alive用法及(activated,deactivated生命周期)
<template> <div id="app"> <!-- <img src="./assets/logo.png"> ...
- Vue.js 源码分析(九) 基础篇 生命周期详解
先来看看官网的介绍: 主要有八个生命周期,分别是: beforeCreate.created.beforeMount.mounted.beforeupdate.updated .beforeDes ...
- vue学习笔记(四)——Vue实例以及生命周期
1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) | |-------el (提供一个在页面上已存在的 DOM 元素作为 V ...
- vue的生命周期和路由守卫
组件相关钩子函数: beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destoryed 还有 ...
- vue实例以及生命周期
1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) | |-------el (提供一个在页面上已存在的 DOM 元素作为 V ...
- Vue源码学习(二)——生命周期
官网对生命周期给出了一个比较完成的流程图,如下所示: 从图中我们可以看到我们的Vue创建的过程要经过以下的钩子函数: beforeCreate => created => beforeMo ...
- Vue生命周期钩子---3
vue生命周期流程图:4张图 : 生命周期的解析和应用: Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue ...
随机推荐
- kali2020-bash: openvas-setup:未找到命令 ,解决办法
将openvas-setup命令换成 gvm-setup命令即可
- can't convert CUDA tensor to numpy. Use Tensor.cpu() to copy the tensor to host memory first.
predict=predict.data.numpy() 这一行报错意思是:如果想把CUDA tensor格式的数据改成numpy时,需要先将其转换成cpu float-tensor随后再转到nump ...
- Linux系列---【设置ssh连接超时时间】
设置ssh连接超时时间 shell工具总是不断的超时,上个厕所就断开了,很不方便,这里根据自己习惯设置一下. echo "export TMOUT=600" >> /e ...
- mybatis插入批量数据
1 for循环重复调用dao,消耗大 2 sql语句编写插入多条,只用于少数 3 mybatis的batch插入 @Test public void testInsertBatch2() ...
- MAVEN实践经验
1安装与配置 jdk: 1.6或以上 下载MAVEN3.x版本,解压后放在随便一目录,然后在系统环境变量配置MAVEN路径. 运行cmd-->输入 mvn -version 会出现maven版本 ...
- ABP vNext微服务架构详细教程——镜像推送
1. Jenkins搭建 为实现容器化部署,我们需要将代码打包成镜像并推送至容器仓库,我们可以选择自建容器仓库或者使用公有云服务商提供的镜像仓库.这里我们使用阿里云提供的免费镜像仓库. 代码打包和镜像 ...
- Ubuntu解决无法远程连接
检查SSH是否安装 ssh localhost 如果没有安装,通过APT的命令安装 sudo apt install openssh-server 无法连接Ubuntu中的root用户 其他用户可以连 ...
- DOS基本命令与快捷键
DOS命令 #查看当前盘下的所有目录 dir #切换盘符 直接盘符名称: 例如切换D: #切换目录 cd 目录名称 #清屏 cls #退出 exit #创建 cd>文件名称.文件后缀 #查询电脑 ...
- 前端访问Tornado跨域问题解决
- Spring 常见问题 - 1
1. 什么是spring? 两大功能,依赖注入和面向切面编程(DI & AOP) 为了降低 Java 开发的复杂性,Spring 采取了以下4种关键策略 基于 POJO 的轻量级和最小侵入性编 ...