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数组组合成字符串的脚本
Jan 06 Javascript
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
gojs实现蚂蚁线动画效果
Feb 18 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
ip签名探针
2006/10/09 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
PHP基本语法实例总结
2016/09/09 PHP
降低PHP Redis内存占用
2017/03/23 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
Python 抓取动态网页内容方案详解
2014/12/25 Python
使用python绘制常用的图表
2016/08/27 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
python实现证件照换底功能
2019/08/20 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
2013年保送生自荐信格式
2013/11/20 职场文书
个人对照检查材料
2014/02/12 职场文书
产品设计开发计划书
2014/05/07 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
学雷锋的心得体会
2014/09/04 职场文书
学习经验交流会总结
2015/11/02 职场文书
小学一年级语文教学反思
2016/03/03 职场文书