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测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
AngularJS实现Input格式化的方法
Nov 07 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
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 pack与unpack 摸板字符字符含义
2009/10/29 PHP
PHP类的反射用法实例
2014/11/03 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
javascript数组排序汇总
2015/07/07 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
python制作websocket服务器实例分享
2016/11/20 Python
python getopt详解及简单实例
2016/12/30 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
python实现flappy bird小游戏
2018/12/24 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
Python sublime安装及配置过程详解
2020/06/29 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
个人承诺书格式
2014/06/03 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
实习报告范文
2019/07/30 职场文书
python实现的web监控系统
2021/04/27 Python