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 相关文章推荐
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
理解JSON:3分钟课程
Oct 28 Javascript
js获取class的所有元素
Mar 28 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
Vue3中的Refs和Ref详情
Nov 11 Vue.js
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
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
chosen实现省市区三级联动
2018/08/16 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
python基础教程之类class定义使用方法
2014/02/20 Python
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
python操作kafka实践的示例代码
2019/06/19 Python
Python json格式化打印实现过程解析
2020/07/21 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
CSS3 边框效果
2019/11/04 HTML / CSS
卫校毕业生自我鉴定
2013/10/31 职场文书
物业电工岗位职责
2013/11/20 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
初婚初育证明范本
2014/11/24 职场文书
合作意向协议书
2015/01/29 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL