keep-alive用法及注解

一、为什么要用keep-alive

keep-alive是vue的内置组件，用它包裹动态组件后，组件之间切换不会销毁组件，而是将组件状态缓存在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

例：用户填写表单后跳转至其他路由组件，再返回表单路由组件时，表单不会重置

二、怎么用keep-alive

方法1：在App.vue中，keep-alive 结合include/exclude 属性缓存组件

//include值为字符串或者正则表达式，匹配的组件会被缓存;
//exclude值为字符串或正则表达式，匹配的组件不会被缓存;// 缓存所有组件
<keep-alive><router-view />
</keep-alive>// include 只缓存组件名字为keep的组件，其他组件不会缓存
<keep-alive include="keep"><router-view />
</keep-alive>// exclude不缓存组件名字为keep的组件，其他组件都会缓存
<keep-alive exclude="keep"><router-view />
</keep-alive>

方法2：在Route中，keep-alive结合路由中meta属性来控制组件缓存


{path: '/keep',name: 'keep',meta:{keepAlive: true  // 需要缓存},component: keep
}

三、keep-alive的生命周期

使用keep-alive缓存组件后，组件的部分生命周期不会被触发，所以就有了

activated与deactivated生命周期函数

activated：进入组件时调用，在渲染阶段不会被调用
deactivated：离开组件时调用，在渲染阶段不会被调用

keep-alive用法及注解相关推荐

office VBA 用户窗体控件单元格参数的用法与注解
目录编号名称编号名称编号名称编号名称编号名称 1 错误类 2 全局变量 3 开关 4 弹窗 5 换行 6 调试打印 7 引用 8 延时 9 日志窗口显示(全局文本) 10 调用外 ...
java注解 @SuppressWarnings注解用法
@SuppressWarnings注解用法 @SuppressWarnings注解主要用在取消一些编译器产生的警告对代码工具左侧行列提示,但这种警告可以通过注释类型声明来取消 @SuppressWar ...
@Aspect注解用法
本文继续AOP,目前手动Aop中三种方式已经介绍2种了,本文将介绍另外一种:AspectJProxyFactory,可能大家对这个比较陌生,但是@Aspect这个注解大家应该很熟悉吧,通过这个注解在s ...
Android 自定义注解详细用法，手写Butterknife黄油刀
前言本篇文章主要讲解 Java 注解在Android中的常见用法 Java 注解(Annotation) Java 注解(Annotation)又称 Java 标注,是 JDK5.0 引入的一种注释 ...
注解 java.lang.annotation.Inherited 介绍
在Spring Boot中大量使用了@Inherited注解.我们来了解一下这个注解的用法,注解的源码: package java.lang.annotation;/*** Indicates tha ...
Mycat1.6之注解多租户
2019独角兽企业重金招聘Python工程师标准>>> Mycat1.6之注解&多租户博客分类: sql 永久链接: http://gaojingsong.iteye.co ...
一小时搞明白自定义注解(Annotation)
原文链接:http://blog.csdn.net/u013045971/article/details/53433874 什么是注解 Annotation(注解)就是Java提供了一种元程序中的元素 ...
java中的controller_详解Spring Boot中Controller用法
Controller Controller是SpringBoot里最基本的组件,他的作用是把用户提交来的请求通过对URL的匹配,分配个不同的接收器,再进行处理,然后向用户返回结果.他的重点就在于如何从 ...
@Aspect中@Pointcut 12种用法
本文主要内容:掌握@Pointcut的12种用法. Aop相关阅读阅读本文之前,需要先掌握下面3篇文章内容,不然会比较吃力. Spring系列第15篇:代理详解(java动态代理&CGLIB ...