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 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
详解Vue router路由
Nov 20 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
PHP中phar包的使用教程
2017/06/14 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
新浪的图片新闻效果
2007/01/13 Javascript
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
Python入门篇之正则表达式
2014/10/20 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
微信小程序python用户认证的实现
2019/07/29 Python
python检测服务器端口代码实例
2019/08/31 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
python中shell执行知识点
2020/05/06 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
英国手机零售商:Metrofone
2019/03/18 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
中学生自我鉴定
2014/02/04 职场文书
物理教育专业求职信
2014/06/25 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
详解Vue3使用axios的配置教程
2022/04/29 Vue.js