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 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
Javascript中神奇的this
Jan 20 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 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(4) php 函数 补充2
2010/02/15 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
计算机网络专业个人的自我评价
2013/10/17 职场文书
会计自我鉴定
2014/02/04 职场文书
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL