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多线程的实现方法
May 08 Javascript
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 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 获取SWF动画截图示例代码
2014/02/10 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
php限制ip地址范围的方法
2015/03/31 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
实例解析Array和String方法
2016/12/14 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
高级护理专业大学生求职信
2013/10/24 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
个人债务授权委托书
2014/10/17 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
同学会感言
2015/07/30 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
Python中第三方库Faker的使用详解
2022/04/02 Python