keep-alive用法(include、exclude、max)
文章目录
- 1.用处
- 2.属性
- 3.介绍
- 4.使用
- 5.使用中可能遇到的问题
1.用处
主要用于保留组件状态或避免重新渲染。
2.属性
- include 字符串,数组或正则表达式。只有名称匹配的组件会被缓存。
- exclude 字符串,数组或正则表达式。任何名称匹配的组件都不会缓存。
- max 数字。最多可以缓存多少组件实例。
3.介绍
< keep-alive > 包裹动态组件时,会被缓存不活动的组件实例,而不是销毁它们。
< keep-alive > 是个抽象组件,它自身不会渲染一个DOM元素,也不会出现在组件的父组件链中。
当组件在< keep-alive >内切换,它的 activated 和 deactived 这两个生命周期钩子函数将会被对应执行。
Vue.js官网传送门
4.使用
1. include
<keep-alive><component /> //需要缓存的组件
</keep-alive><!-- 逗号分隔字符串 -->
<keep-alive include="a,b"><component :is="view"></component>
</keep-alive><!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/"><component :is="view"></component>
</keep-alive><!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']"><component :is="view"></component>
</keep-alive><!-- 只缓存组件name为name1或者name1的组件 -->
<keep-alive include="a,b"> <component />
</keep-alive><!-- excludet同理 -->
2. excludet
<!-- 组件name为a的组件不缓存-->
<keep-alive exclude="a"> <component />
</keep-alive><!-- 注意:如果同时使用include,exclude,那么exclude优先于include, 下面的例子只缓存a组件-->
<keep-alive include="a,b" exclude="b"> <component />
</keep-alive>
3. max
<!-- 最多可以缓存多少组件实例。一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。-->
<keep-alive max="5"> <component />
</keep-alive>
5.使用中可能遇到的问题
- 当引入keep-alive 的时候,页面第一次进入,钩子的触发顺序created> mounted> activated,
退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。
注意:我们知道 keep-alive 之后页面模板第一次初始化解析变成HTML片段后,再次进入就不在重新解析而是读取内存中的数据,即,只有当数据变化时,才使用VirtualDOM进行diff更新。有需要的话,页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。
所以,有需要的话,应该activated中留一份数据获取的代码,或者不要created部分,直接将created中的代码转移到activated中。
- 匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
- 不会在函数式组件中正常工作,因为它们没有缓存实例。
- 最多可以缓存多少组件实例。一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。
点击查看不同场景的实战
keep-alive用法(include、exclude、max)相关推荐
- mtb7_参数控制要显示的维度Level of Detail Calculation_Context Filter > Fixed > Dimension > Include Exclude VizQ
When we talk about Level of Detail (LOD) calculations in Tableau, we mean three expressions: FIXED, ...
- Error: Rule can only have one resource source (provided resource and test + include + exclude) in {.
vue-cli项目运行npm run dev / npm run serve后报错: Error: Rule can only have one resource source (provided r ...
- python中max函数用法_Python中max函数用法实例分析
Python中max函数用法实例分析 更新时间:2015年07月17日 15:45:09 作者:优雅先生 这篇文章主要介绍了Python中max函数用法,实例分析了Python中max函数的功能与使用 ...
- vue3中keep-alive及include/exclude的使用
1.首先准备前期环境,路由配置及界面配置 const addRouters: Array<RouteRecordRaw> = [{//路由path:'/',name:'home',comp ...
- python中max函数用法_python奇技淫巧——max/min函数的用法
本文以max()为例,对min/max内建函数进行说明 源码 def max(*args, key=None): # known special case of max ""&qu ...
- python中max函数用法_python的max函数的用法,值得收藏
本文,用max函数来找出数据中的最大值. 工具/材料 电脑 python 操作方法 01 从一串数字里面,找出最大值. max([5,6,7,8]) 02 从字符串里面找出最大值. max('5678 ...
- 一套史诗级版vue详解!
文章目录 一.vue官方脚手架 1.初识vue 2.使用vue的方式(2种) 3.搭建vue开发环境 4.vue的重要版本 5.使用@vue/cli进行vue开发环境的构建 6.vue基础知识 1.数 ...
- 2022年前端面试题整理,持续更新中
端面试题整理 已同步到掘金.CSDN 掘金地址: https://juejin.cn/post/7075332630417244173 CSDN 地址:https://blog.csdn.net/z1 ...
- 【Vue.js 3.0源码】KeepAlive 组件:如何让组件在内存中缓存和调度?
自我介绍:大家好,我是吉帅振的网络日志(其他平台账号名字相同),互联网前端开发工程师,工作5年,去过上海和北京,经历创业公司,加入过阿里本地生活团队,现在郑州北游教育从事编程培训. 一.前言 多个平行 ...
- expdp impdp中 exclude/include 的使用
exclude和include参数能够在使用expdp或impdp是对特定的对象或对象类型进行筛选或过滤.比如因工作的需要导出特定的表或不导出特定 的表.视图以及存储过程.索引.约束.授权统计信息等等 ...
最新文章
- java最全人名数组_java 里有两个方法 第一个方法定义一个数组 每个数组都是一个学生类 每个学生有姓名 学号 年龄...
- [锋利JQ]-图片提示效果
- linux管道阻塞代码,linux中的管道
- python3精要(5)-最长公共前缀Trie树
- monotouch Single View Application
- JavaWeb-综合案例(用户信息)-学习笔记02【登录功能】
- http请求之get和post的区别
- 交换两个整形变量的数值
- 需求调研的方法及过程_培训需求调研方法
- apply、call、callee、caller初步了解
- 嵌入式通过绑定实现双网卡冗余
- struts2.2跟jstl怎么整合
- FORTRAN里的SCALE函数
- C#中对 XML节点进行添加,删除,查找和删除操作
- Python:Matplotlib 画图
- openstack安装newton版本dashboard+cinder(六)
- OpenCV3.0-图像特征检测
- InfoPath 2007表单应用
- Spring容器是什么?为什么要使用Spring容器?
- 苹果和android充电线一根,苹果iPhone8充电接口大变:以后和安卓机用同一根数据线!...