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 相关文章推荐
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
js实现烟花特效
Mar 02 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
vscode中使用npm安装babel的方法
Aug 02 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代码简化
2010/02/08 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
PHP实现简易计算器功能
2020/08/28 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
JS代码触发事件代码实例
2020/01/02 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
django模板语法学习之include示例详解
2017/12/17 Python
python基于ID3思想的决策树
2018/01/03 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
交通事故和解协议书
2014/09/25 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js