Vue中keep-alive组件作用详解


Posted in Javascript onFebruary 04, 2020

keep-alive组件的作用,供大家参考

作用:用于保留组件状态避免重新渲染(缓存的作用)

比如:当一个目录页面与一个详情页面,用户经常:打开目录页面=>进入详情页面=>返回目录页面=>打开详情页面,这样目录页面就是一个使用频率很高的页面,那么就可以对目录组件使用<keep-alive></keep-alive>进行缓存,这样用户每次返回目录时,都能从缓存中快速渲染,而不用重新渲染

属性

该标签有两个属性include与exclude:

  • include:字符串或者正则表达式。只有匹配的组件会被缓存
  • exclude:字符串或者正则表达式。任何匹配的组件都不会被缓存。

用法

<!-- 基本 -->
<keep-alive>
 <component :is="view"></component>
</keep-alive>

<!-- 多个条件判断的子组件 -->
<keep-alive>
 <comp-a v-if="a > 1"></comp-a>
 <comp-b v-else></comp-b>
</keep-alive>

<!-- 常见应用 -->
<keep-alive>
 <router-view></router-view>
</keep-alive>

注意: 是用在其一个直属的子组件被开关时的情形,要求同时只有一个子元素被渲染

include和exclude属性的使用

include和exclude属性允许组件有条件地缓存。二者都可以用逗号分割字符串、正则表达式或者一个数组。

<!-- 逗号分隔字符串 -->
<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选项不可用,则匹配它的局部注册名称

生命钩子

  • keep-alive提供了两个生命钩子,分别是activateddeactivated。因为keep-alive会将组件保存在内存中,并不会销毁以及重新创建,所以不会重新调用组件的created、mounted这些函数。
  • 被 keep-alive 包裹的组件被缓存之后有两个独有的生命周期: activated 和 deactivated。activated 生命周期在组件激活时调用、deactivated 生命周期在组件停用时调用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 Javascript
WEB前端性能优化的7大手段详解
Feb 04 #Javascript
JavaScript对象属性操作实例解析
Feb 04 #Javascript
JavaScript this使用方法图解
Feb 04 #Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 #Javascript
JavaScript原型继承和原型链原理详解
Feb 04 #Javascript
JavaScript单线程和任务队列原理解析
Feb 04 #Javascript
Vue中this.$nextTick的作用及用法
Feb 04 #Javascript
You might like
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
PHP获取文件行数的方法
2015/06/10 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
深入分析PHP设计模式
2020/06/15 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
浅谈jquery事件处理
2015/04/24 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
vue实现记事本功能
2019/06/26 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
Python 装饰器深入理解
2017/03/16 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
浅析Python数据处理
2018/05/02 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
python使用Geany编辑器配置方法
2020/02/21 Python
Python实现像awk一样分割字符串
2020/09/15 Python
幼儿园母亲节活动方案
2014/03/10 职场文书
群众路线专项整治方案
2014/10/27 职场文书