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 相关文章推荐
jquery offset函数应用实例
Nov 14 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 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 urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
javascript一点特殊用法
2008/05/28 Javascript
JQuery 入门实例1
2009/06/25 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
jQuery bind事件使用详解
2011/05/05 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
Python实现从url中提取域名的几种方法
2014/09/26 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
详解django三种文件下载方式
2018/04/06 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Django 视图层(view)的使用
2018/11/09 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
户外活动策划方案
2014/03/12 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
中学教师个人总结
2015/02/10 职场文书
放射科岗位职责
2015/02/14 职场文书
2016高考感言
2015/08/01 职场文书
高一化学教学反思
2016/02/22 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技