keep-alive 是什么?
keep-alive是什么
keep-alive
是vue
中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM
keep-alive
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们
keep-alive
可以设置以下props
属性:
include
- 字符串或正则表达式。只有名称匹配的组件会被缓存exclude
- 字符串或正则表达式。任何名称匹配的组件都不会被缓存max
- 数字。最多可以缓存多少组件实例
用法
关于keep-alive
的基本用法:
<keep-alive><component :is="view"></component>
</keep-alive>
使用includes
和exclude
:
<keep-alive include="a,b"><component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/"><component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']"><component :is="view"></component>
</keep-alive>
匹配首先检查组件自身的 name
选项,如果 name
选项不可用,则匹配它的局部注册名称 (父组件 components
选项的键值),匿名组件不能被匹配
设置了 keep-alive 缓存的组件,会多出两个生命周期钩子(activated
与deactivated
):
使用场景
使用原则:当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive
举个栗子:
当我们从首页
–>列表页
–>商详页
–>再返回
,这时候列表页应该是需要keep-alive
从首页
–>列表页
–>商详页
–>返回到列表页(需要缓存)
–>返回到首页(需要缓存)
–>再次进入列表页(不需要缓存)
,这时候可以按需来控制页面的keep-alive
在路由中设置keepAlive
属性判断是否需要缓存
{path: 'list',name: 'itemList', // 列表页component (resolve) {require(['@/pages/item/list'], resolve)},meta: {keepAlive: true,title: '列表页'}
}
使用<keep-alive>
<div id="app" class='wrapper'><keep-alive><!-- 需要缓存的视图组件 --><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><!-- 不需要缓存的视图组件 --><router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
keep-alive 是什么?相关推荐
- 转载:有关SQL server connection Keep Alive 的FAQ(3)
转载:http://blogs.msdn.com/b/apgcdsd/archive/2012/06/07/sql-server-connection-keep-alive-faq-3.aspx 这个 ...
- 有关SQL server connection Keep Alive 的FAQ(3)
这个是SQL Server Keep Alive FAQ文章的最后一篇. 问题1:为什么我在客户端设置了KeepAlive值,但是我使用SQL server management studio 测试的 ...
- ES-PHP向ES批量添加文档报No alive nodes found in your cluster
ES-PHP向ES批量添加文档报No alive nodes found in your cluster 2016年12月14日 12:31:40 阅读数:2668 参考文章phpcurl 请求Chu ...
- (chap2 简单的Http协议) HTTP性能优化之持久连接Keep Alive
1. 持久连接节省流量 在一开始的HTTP协议中,每进行一次HTTP 通信就断开一次TCP连接. 在请求一个很多资源的HTML页面的时候,每次连接都会造成无所谓的TCP连接的建立和断开,增加了通信量的 ...
- 有关SQL server connection Keep Alive 的FAQ(2)
这篇文章再进一步讨论有关Keep Alive的几个问题. 1.Keep Alive机制,是否只和特定的provider有关,比如SQL native client, odbc, oledb, ADO等 ...
- 论文阅读 | Bringing a Blurry Frame Alive at High Frame-Rate with an Event Camera
前言:这是一篇事件相机面向去糊方向的文章.发表在了CVPR2019 oral,之后也改进出了一篇PAMI.内容主要是对事件相机的成像原理和图片的模糊原理进行建模,整理出公式并给出了优化函数,通过不断调 ...
- ES-PHP 聚合查询时 No alive nodes found in your cluster
文章目录 场景 过程 解决 场景 一个聚合查询,时间范围短时,正常响应; 时间范围长时,异常:查看日志 No alive nodes found in your cluster 线下环境限于数据量的问 ...
- keep alive是什么?
当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能. 2.k ...
- 【网络协议】TCP和HTTP中keep alive机制
简介:TCP协议和HTTP协议中,都有keepalive机制,只是二者的含义有所不同.TCP中keepalive主要用来进行链路检测:HTTP中keepalive主要用来进行链路复用.其中http1. ...
- Number of alive brokers ‘0’ does not meet the required replication factor ‘3’ for the offsets topic
今天kafka积压监控突然为0 一开始以为消费组厉害,但是一上午都是0..... 感觉不对劲,去kafka执行 结果报错 协调器不可用! the coordinator is not acailab ...
最新文章
- Redis介绍及部署在CentOS7上(一)
- CodeBlocks下搭建Opencv——问题之——计算机中丢失 opencv_world300.dll
- 我的 Windows 电脑已经不用安全软件好多年了
- 模板 n维矩阵的二分幂
- java.lang.SecurityException: class “org.bouncycastle.asn1.DERObject“‘s signer information does not m
- 最全MD5 密码破解 碰撞 网站
- matlab怎么求过渡矩阵,求过渡矩阵的方法
- 如何将F4V格式的视频转换成MP4格式 1
- java计算机毕业设计雁门关风景区宣传网站源码+系统+mysql数据库+lw文档
- 国外广告联盟前期需要准备的事情
- Java Swing扫雷游戏demo分享
- /bin/bash^M: 坏的解释器: 没有那个文件或目录
- 软件版本中的Alpha,Beta,RC,Trial是什么意思
- Primefaces使用小结
- jemeter做微信公众号压测
- python之re模块详解
- TCP/IP卷一:20---链路层之(环回地址)
- Python 3 集合方法 add( )
- 完全二叉树 和 满二叉树的区别
- 工作环境搭建CheckList