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项目利用axios请求接口下载excel
Nov 17 Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 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
基于empty函数的判断详解
2013/06/17 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
jquery插件开发方法(初学者)
2012/02/03 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
python for 循环获取index索引的方法
2019/02/01 Python
PyTorch预训练的实现
2019/09/18 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
Django静态文件加载失败解决方案
2020/08/26 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
自我鉴定四大框架
2014/01/17 职场文书
高中打架检讨书
2014/02/13 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
2015高考寄语集锦
2015/02/27 职场文书
关于开学的感想
2015/08/10 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python