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的更多相关文章

  1. Memcached集群/分布式/高可用 及 Magent缓存代理搭建过程 详解

    当网站访问量达到一定时,如何做Memcached集群,又如何高可用,是接下来要讨论的问题. 有这么一段文字来描述“Memcached集群” Memcached如何处理容错的? 不处理!:) 在memc ...

  2. Linux ARP缓存配置和状态查看命令

    查看Linux ARP缓存老化时间 cat /proc/sys/net/ipv4/neigh/eth0/base_reachable_time同目录下还有一个文件gc_stale_time,官方解释如 ...

  3. redis+keeplived分布式缓存

    redis(三)redis+Keepalived主从热备秒级切换 博客分类: 分布式缓存Redis redis高可用Keepalived  一 简介 安装使用centos 5.10 Master 19 ...

  4. Java数据库缓存思路

    为什么要用缓存?如果问这个问题说明你还是新手,数据库吞吐量毕竟有限,每秒读写5000次了不起了,如果不用缓存,假设一个页面有100个数据库操作,50个用户并发数据库就歇菜,这样最多能支撑的pv也就50 ...

  5. Window平台搭建Redis分布式缓存集群 (一)server搭建及性能測试

    百度定义:Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对很多其它.包含string(字符串).list(链表).set(集合).zset(sort ...

  6. Redis 缓存失效和回收机制

    本文及后续文章,Redis版本均是v3.2.8 一.内存回收策略 maxmemory配置用于配置Redis存储数据时指定限制的内存大小.我们可以通过redis.conf配置或者使用CONFIG SET ...

  7. 分布式缓存技术之Redis_04Redis的应用实战

    目录 1 Redis Java客户端的使用 Jedis 单点连接 Jedis sentinel连接哨兵集群 Jedis sentinel源码分析 Jedis Cluster分片环境连接 Jedis C ...

  8. 基于redis的分布式缓存disgear开源到github上了

    disgear是笔者参考solrcloud架构基于redis实现的分布式的缓存,支持数据切分到多台机器上,支持HA,支持读写分离和主节点失效自动选举,目前把它开放到github上,开放给大家 gith ...

  9. Memcached内存缓存技术

    Memcached是什么,有什么作用? Memcached是一个开源的.高性能的内存缓存软件,从名称上看Mem就是内存的意思,而Cache就是缓存的意思. Memcached通过在事先规划好的内存空间 ...

  10. Memcached集群:Magent缓存代理使用

    小结: 先启动memcached 然后启动magent memcached -d -p 11211 -u memcached -m 64 -c 5120 memcached -d -p 11212 - ...

随机推荐

  1. Chapter 04—Basic Data Management

    1. 创建新的变量 variable<-expression expression:包含一组大量的操作符和函数.常用的算术操作符如下表: 例1:根据已知变量,创建新变量的三种途径 > my ...

  2. python 备忘录

    1. python 变量 区分大小写 2. 字符串可以用   'X'  "X"  '''X'''  """X""" 3. ...

  3. ASP.NET Core SignalR :学习消息通讯,实现一个消息通知

    什么是 SignalR 目前我用业余时间正在做一个博客系统,其中有个功能就是评论通知,就是假如A用户评论B用户的时候,如果B用户首页处于打开状态,那么就会提示B用户有未读消息.暂时用SignalR来实 ...

  4. 华为云MySQL金融版正式商用,高可靠的金融级数据库来了

    摘要:全新三节点架构,基于深度优化的MGR组复制技术,提供金融级的数据一致性. 日前,华为云数据库MySQL 金融版正式商业化发布,MySQL金融版采用MGR技术,基于Paxos协议,采用一主两备三节 ...

  5. Sql Server连表查询字段为null

    这是一个坑,并且是有毒的坑. 一不小心我就掉进了这个坑里面,费了好大的力气这才从坑里面爬出来. 话不多说,开始吹BB啦. 一.简单说说遇到的问题: 连表查询,一对多. 出现 int,  smallda ...

  6. Spring Cloud第六篇 | Hystrix仪表盘监控Hystrix Dashboard

    本文是Spring Cloud专栏的第六篇文章,了解前五篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring Cloud ...

  7. Python--glob模块

    0.glob模块和通配符 glob模块最主要的方法有2个: 1.glob() 2.iglob() 以上2分方法一般和通配符一起使用,常用的通配符有3个: * :匹配零个或多个字符 ? :匹配任何单个的 ...

  8. 你真的了解JSON吗?

    一.JSON——JavaScript Object Notation JSON 是一种语法用来序列化对象.数组.数值.字符串.布尔值和null .它基于 JavaScript 语法,但与之不同:一些J ...

  9. windows系统安装git

    一.下载git的安装包 git官网的下载地址:https://git-scm.com/download/win 选择自己的机型进行安装. 二.安装配置 一直点下一步就可以 安装完毕之后,打开电脑命令窗 ...

  10. 2019 AI Bootcamp Guangzhou 参会日记

    2019年的全球AI训练营在北京.上海.广州.杭州.宁波五个地方同时举办! 12月14日,微软全球AI Bootcamp活动再次驾临广州,本次会议结合 ML.NET 和基于 SciSharp 社区介绍 ...