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 相关文章推荐
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 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
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
php中JSON的使用与转换
2015/01/14 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
python实现外卖信息管理系统
2018/01/11 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
班组长岗位职责范本
2014/01/05 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
老师的检讨书
2014/02/23 职场文书
爱之链教学反思
2014/04/30 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
安徽导游词
2015/02/12 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
python基础之爬虫入门
2021/05/10 Python
用python批量解压带密码的压缩包
2021/05/31 Python
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
php修改word的实例方法
2021/11/17 PHP
Vue h函数的使用详解
2022/02/18 Vue.js
Python实现文字pdf转换图片pdf效果
2022/04/03 Python