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 ...
随机推荐
- PSPNet 代码分析
https://www.lmlphp.com/user/62501/article/item/1225624/ train.py 网络训练主函数,主要操作有: 传入训练参数:通常采用argparse库 ...
- 核函数(kernel function)
在接触反演.算法等方面的知识后,经常听到"核"这个字,它不像对原始变量的线性变换,也不像类似于机器学习中激活函数那样的非线性变换,对原始数据进行变换,就可以将复杂的问题简单化.接下 ...
- android charles 抓不到https包,翻了2天资料总算是找到答案了
问题, android7.0以上有权限限制,导致很多机子无法用Charles 抓ssl的包. 以下是我自己的坑请大家参考 原因一: 用Charles 工具上的地址去安装 chls.pro/ssl 原因 ...
- LINUX配置固定IP以及DNS
配置固定ip #vim /etc/sysconfig/network-scripts/ifcfg-ens33 TYPE=EthernetPROXY_METHOD=noneBROWSER_ONLY=no ...
- 用js获取当前路由信息的方法
1,设置或获取对象指定的文件名或路径.alert(window.location.pathname)2,设置或获取整个 URL 为字符串.alert(window.location.href);3,设 ...
- 第8章 使用标记帮助工具构建表单(ASP.NET Core in Action, 2nd Edition)
本章包括 使用Tag Helpers轻松构建表单 使用锚标记帮助程序生成URL 使用Tag Helpers为Razor添加功能 在第7章中,您了解了Razor模板以及如何使用它们为应用程序生成视图.通 ...
- openwrt扩容
方法二.三记得先使用Linux系统打开 GParted -- Download 方法三偏移地址获取: 1. 运行的openwrt安装losetup 2. 安装完毕后执行:losetup 获取偏移地址. ...
- 使用idea从零编写SpringCloud项目-Feign
ps:Fegin和Ribbon 其实是差不多的东西,Fegin里面也是集成了Ribbon,不过咱们写代码不是要优雅嘛,使用Feign就会优雅很多了,看着比直接使用Ribbon舒坦一点 就不重新构建项目 ...
- 斐讯K2路由器刷机教程
为了避免斐讯后门程序. 我用的win10系统 我刷的是华硕的老毛子 Padavan,我放的是压缩包,请解压到桌面! 下载地址: 链接:https://pan.baidu.com/s/1O_spSek- ...
- OSIDP-I/O管理和磁盘调度-11
I/O设备 I/O设备分类:人可读.机器可读和远程通信三类. I/O设备之间的差别: 1.数据传送速率 2.应用领域 3.控制的复杂性 4.传送单位 5.数据表示形式 6.错误条件 I/O功能的组织 ...