缓存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 - ...
随机推荐
- 螺旋矩阵II
Given a positive integer n, generate a square matrix filled with elements from 1 to n2 in spiral ord ...
- Nginx访问日志、日志切割、静态文件不记录日志和过期时间
6月8日任务 12.10 Nginx访问日志12.11 Nginx日志切割12.12 静态文件不记录日志和过期时间 12.10 Nginx访问日志 除了在主配置文件nginx.conf里定义日志格式外 ...
- 深入 .NET Core 基础 - 1:deps.json, runtimeconfig.json 以及 dll
深入 .NET Core 基础:deps.json, runtimeconfig.json 以及 dll 原文地址:https://natemcmaster.com/blog/2017/12/21/n ...
- 数据结构与算法之java语言实现(一):稀疏数组
一.概念&引入 什么是稀疏数组? 稀疏数组是面对一个二维数组中有众多重复元素的情况下,为了节省磁盘空间,将此二维数组转化为更加节省空间的一种数组,我们叫他稀疏数组. 只是听概念或许会看不明白, ...
- shell脚本exercise2
通过文件里面的网址,判断是否访问成功网址 #!/bin/bash check(){ code=`curl -I -m -o /dev/null -s -w %{http_code} http://$u ...
- 【经验分享】linux交叉编译 - openssl动态库
一.准备工作 1.到openssl官网下载最新版本openssl(如openssl-1.1.1d.tar.gz),上传到linux编译机上(如上传到目录/home/test下),并使用tar -xvf ...
- SpringBoot入门简介(一)
1.SpringBoot简介 1.1 什么是Spring 随着动态语言的流行 (Ruby.Groovy.Scala.Node.js),Java 的开发显得格外的笨重:繁多的配置.低下的开发效率.复杂的 ...
- luogu P2946 [USACO09MAR]牛飞盘队Cow Frisbee Team
题目背景 老唐最近迷上了飞盘,约翰想和他一起玩,于是打算从他家的N头奶牛中选出一支队伍. 每只奶牛的能力为整数,第i头奶牛的能力为R i .飞盘队的队员数量不能少于 1.大于N.一 支队伍的总能力就是 ...
- IO 文件夹的拷贝
package FileCopy; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import ja ...
- [TimLinux] Python 函数(2)
1. 作用 最大化的代码重用:建设复制.粘贴 最小化的代码冗余:减少重复代码 流程分解:将做一件事情分解为相应的步骤,不同步骤封装在不同的函数中. 2. 定义 def 函数名(可选的参数列表): 函数 ...