缓存keep-alive
keep-alive缓存
如果没有缓存,每点击一次导航,内容区就会创建一个组件,该组件会经历整个生命周期,每点击一次,就会创建一个组件,比较浪费性能,这时,我们就要考虑到是否能将点击过的已创建的组件进行缓存,当再次点击已访问过的组件时,这时,就会从缓存中获取该组件,而不会重新创建,这就用到keep-alive。
用keep-alive 标签包裹component组件标签
<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
<component :is="currentComponent"></component>
</keep-alive>
在vue-router中的应用
<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
<router-view></router-view>
</keep-alive>
include定义缓存白名单,keep-alive会缓存命中的组件;exclude定义缓存黑名单,被命中的组件将不会被缓存;max定义缓存组件上限,超出上限使用LRU的策略置换缓存数据。
Activated、deactivated
keep-alive对应两个生命周期:activated、deactivated
activated(){
console.log("活跃状态");
}
deactivated(){
console.log("缓存状态")
}
当从缓存中读取a组件时,此时a组件处于活跃状态,
当从缓存中读取b组件时,a组件处于缓存状态,此时b组件处于活跃状态,
用途:
当在a组件浏览小说到某个位置,这时,我切换到b组件,那么就用a组件的缓存状态函数记录这个位置(),
当我再次切换到a组件,用活跃状态函数保存到该位置
include、exclude
include属性表示只有name属性为bookLists,bookLists的组件会被缓存,其它组件不会被缓存
exclude属性表示除了name属性为indexLists的组件不会被缓存,其它组件都会被缓存
<keep-alive include="bookLists,bookLists">
<router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
<router-view></router-view>
</keep-alive>
注意:name是组件的名字,而不是路由的名字
如一个vue文件
<template>...</template>
<script>
export default {
name:”bookLists”,
data:(){
return {}
}
}
</script>
利用meta属性
在router.js路由设置该属性
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
meta: {
keepAlive: true // 需要被缓存的组件
}
},
{
path: '/vuexTry',
component: () => import('./views/vuexTry.vue'),
meta: {
keepAlive: false // 不需要被缓存的组件
}
}
<keep-alive>
<router-view v-if="this.$route.meat.keepAlive"></router-view>
<!--这里是会被缓存的组件-->
</keep-alive>
缓存keep-alive的更多相关文章
- Memcached集群/分布式/高可用 及 Magent缓存代理搭建过程 详解
当网站访问量达到一定时,如何做Memcached集群,又如何高可用,是接下来要讨论的问题. 有这么一段文字来描述“Memcached集群” Memcached如何处理容错的? 不处理!:) 在memc ...
- Linux ARP缓存配置和状态查看命令
查看Linux ARP缓存老化时间 cat /proc/sys/net/ipv4/neigh/eth0/base_reachable_time同目录下还有一个文件gc_stale_time,官方解释如 ...
- redis+keeplived分布式缓存
redis(三)redis+Keepalived主从热备秒级切换 博客分类: 分布式缓存Redis redis高可用Keepalived 一 简介 安装使用centos 5.10 Master 19 ...
- Java数据库缓存思路
为什么要用缓存?如果问这个问题说明你还是新手,数据库吞吐量毕竟有限,每秒读写5000次了不起了,如果不用缓存,假设一个页面有100个数据库操作,50个用户并发数据库就歇菜,这样最多能支撑的pv也就50 ...
- Window平台搭建Redis分布式缓存集群 (一)server搭建及性能測试
百度定义:Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对很多其它.包含string(字符串).list(链表).set(集合).zset(sort ...
- Redis 缓存失效和回收机制
本文及后续文章,Redis版本均是v3.2.8 一.内存回收策略 maxmemory配置用于配置Redis存储数据时指定限制的内存大小.我们可以通过redis.conf配置或者使用CONFIG SET ...
- 分布式缓存技术之Redis_04Redis的应用实战
目录 1 Redis Java客户端的使用 Jedis 单点连接 Jedis sentinel连接哨兵集群 Jedis sentinel源码分析 Jedis Cluster分片环境连接 Jedis C ...
- 基于redis的分布式缓存disgear开源到github上了
disgear是笔者参考solrcloud架构基于redis实现的分布式的缓存,支持数据切分到多台机器上,支持HA,支持读写分离和主节点失效自动选举,目前把它开放到github上,开放给大家 gith ...
- Memcached内存缓存技术
Memcached是什么,有什么作用? Memcached是一个开源的.高性能的内存缓存软件,从名称上看Mem就是内存的意思,而Cache就是缓存的意思. Memcached通过在事先规划好的内存空间 ...
- Memcached集群:Magent缓存代理使用
小结: 先启动memcached 然后启动magent memcached -d -p 11211 -u memcached -m 64 -c 5120 memcached -d -p 11212 - ...
随机推荐
- Chapter 04—Basic Data Management
1. 创建新的变量 variable<-expression expression:包含一组大量的操作符和函数.常用的算术操作符如下表: 例1:根据已知变量,创建新变量的三种途径 > my ...
- python 备忘录
1. python 变量 区分大小写 2. 字符串可以用 'X' "X" '''X''' """X""" 3. ...
- ASP.NET Core SignalR :学习消息通讯,实现一个消息通知
什么是 SignalR 目前我用业余时间正在做一个博客系统,其中有个功能就是评论通知,就是假如A用户评论B用户的时候,如果B用户首页处于打开状态,那么就会提示B用户有未读消息.暂时用SignalR来实 ...
- 华为云MySQL金融版正式商用,高可靠的金融级数据库来了
摘要:全新三节点架构,基于深度优化的MGR组复制技术,提供金融级的数据一致性. 日前,华为云数据库MySQL 金融版正式商业化发布,MySQL金融版采用MGR技术,基于Paxos协议,采用一主两备三节 ...
- Sql Server连表查询字段为null
这是一个坑,并且是有毒的坑. 一不小心我就掉进了这个坑里面,费了好大的力气这才从坑里面爬出来. 话不多说,开始吹BB啦. 一.简单说说遇到的问题: 连表查询,一对多. 出现 int, smallda ...
- Spring Cloud第六篇 | Hystrix仪表盘监控Hystrix Dashboard
本文是Spring Cloud专栏的第六篇文章,了解前五篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring Cloud ...
- Python--glob模块
0.glob模块和通配符 glob模块最主要的方法有2个: 1.glob() 2.iglob() 以上2分方法一般和通配符一起使用,常用的通配符有3个: * :匹配零个或多个字符 ? :匹配任何单个的 ...
- 你真的了解JSON吗?
一.JSON——JavaScript Object Notation JSON 是一种语法用来序列化对象.数组.数值.字符串.布尔值和null .它基于 JavaScript 语法,但与之不同:一些J ...
- windows系统安装git
一.下载git的安装包 git官网的下载地址:https://git-scm.com/download/win 选择自己的机型进行安装. 二.安装配置 一直点下一步就可以 安装完毕之后,打开电脑命令窗 ...
- 2019 AI Bootcamp Guangzhou 参会日记
2019年的全球AI训练营在北京.上海.广州.杭州.宁波五个地方同时举办! 12月14日,微软全球AI Bootcamp活动再次驾临广州,本次会议结合 ML.NET 和基于 SciSharp 社区介绍 ...