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项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 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面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
基于PHP编程注意事项的小结
2013/04/27 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
利用php生成验证码
2017/02/23 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
numpy中索引和切片详解
2017/12/15 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
django中forms组件的使用与注意
2019/07/08 Python
Python 文件数据读写的具体实现
2020/01/24 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
python 绘制场景热力图的示例
2020/09/23 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
请介绍一下Ant
2016/07/22 面试题
政法大学毕业生自荐信范文
2014/01/01 职场文书
离婚协议书范本2014
2014/10/27 职场文书
2015年入党决心书
2015/02/05 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
初中美术教学反思
2016/02/17 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
Redis如何实现分布式锁
2021/08/23 Redis
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android