vue keep-alive的简单总结


Posted in Vue.js onJanuary 25, 2021

一、作用

主要用于保留组件状态或避免重新渲染。

二、用法

<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。

当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

三、Props

include

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

exclude

exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示:

<!-- 逗号分隔字符串 -->
<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 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

max

max - 数字。最多可以缓存多少组件实例。

一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。

<keep-alive :max="10">
 <component :is="view"></component>
</keep-alive>

以上就是浅析vue中的keep-alive的详细内容,更多关于vue中的keep-alive的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
详解Vue的mixin策略
Nov 19 Vue.js
Vue router安装及使用方法解析
Dec 02 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 #Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 #Vue.js
Vue仿Bibibili首页的问题
Jan 21 #Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 #Vue.js
Vue看了就会的8个小技巧
Jan 21 #Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 #Vue.js
详解实现vue的数据响应式原理
Jan 20 #Vue.js
You might like
理解PHP5中static和const关键字的区别
2007/03/19 PHP
php反弹shell实现代码
2009/04/22 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
JS之小练习代码
2008/10/12 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
应届生煤化工求职信
2013/10/21 职场文书
电脑租赁公司创业计划书
2014/01/08 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
2014年国庆节寄语
2014/09/19 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
企业法人代表证明书
2014/09/27 职场文书
分居协议书范本
2014/11/03 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
学校捐书倡议书
2015/04/27 职场文书
实验心得体会范文
2016/01/25 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript