vue的keep-alive用法技巧


Posted in Javascript onAugust 15, 2019

<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM

<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive>是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

方法1

include: 字符串或正则表达式。只有匹配的组件会被缓存。

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

exclude优先级大于include

<keep-alive include="a,b">
 <!-- 将缓存name为a或者b的组件,结合动态组件使用 -->
 <component :is="view"></component>
</keep-alive>

方法2  (结合berforeRouteEnter,缓存部分页面)

vue的keep-alive用法技巧

vue的keep-alive用法技巧 

vue的keep-alive用法技巧

缓存的页面 created 会执行只有一次,activated每次都会执行 , created 里面做 第一次 isFirstEnter = true(由于页面被缓存,所以一直生效),之后再activated 里面做判断 只有 “不是返回回来的” 和 “第一次进来的” 就刷新数据, 并且要在下面 都设为false, 以免缓存各标识不对,在进入 “列表页” 时,通过router钩子函数 beforeRouteEnter做判断,详情页过来的设 isBack 为true,即不刷新页面

以上就是全部相关知识点内容,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
常用js脚本
Dec 03 Javascript
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
js 数组的for循环到底应该怎么写?
May 31 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
Javascript Promise用法详解
May 10 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
Vue开发环境中修改端口号的实现方法
Aug 15 #Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 #Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 #Javascript
微信小程序之数据绑定原理解析
Aug 14 #Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 #Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 #Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 #Javascript
You might like
用PHP函数解决SQL injection
2006/10/09 PHP
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
ucenter通信原理分析
2015/01/09 PHP
Display SQL Server Version Information
2007/06/21 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
kafka-python批量发送数据的实例
2018/12/27 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
python logging.info在终端没输出的解决
2020/05/12 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
python3代码中实现加法重载的实例
2020/12/03 Python
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
测绘工程系学生的自我评价
2013/11/30 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
机关职员工作检讨书
2014/10/23 职场文书
公务员年度个人总结
2015/02/12 职场文书
《小小的船》教学反思
2016/02/18 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL