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 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue 自定义组件添加原生事件
Apr 21 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
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
详解Vue组件实现tips的总结
2017/11/01 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
python类中super() 的使用解析
2019/12/19 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
python 6种方法实现单例模式
2020/12/15 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
.net面试题
2015/12/22 面试题
大学生找工作推荐信范文
2013/11/28 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
艺术教育实施方案
2014/05/03 职场文书
催款通知书范文
2015/04/17 职场文书
关于迟到的检讨书
2015/05/06 职场文书
元旦主持词开场白
2015/05/29 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python