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. Ubuntu&Mac下使用alias简化日常操作

    alias 在Linux系统中用来给指令起别名,用来简化很长的指令. 用法很简单: alias : 查看当前所有别名 alias tmstart = "$CATALINA_HOME/bin/ ...

  2. 告别编码5分钟,命名2小时!史上最全的Java命名规范参考!

    简洁清爽的代码风格应该是大多数工程师所期待的.在工作中笔者常常因为起名字而纠结,夸张点可以说是编程5分钟,命名两小时!究竟为什么命名成为了工作中的拦路虎. 每个公司都有不同的标准,目的是为了保持统一, ...

  3. OC中内存管理(转)

    OC内存管理 一.基本原理 (一)为什么要进行内存管理. 由于移动设备的内存极其有限,所以每个APP所占的内存也是有限制的,当app所占用的内存较多时,系统就会发出内存警告,这时需要回收一些不需要再继 ...

  4. 个人搭建后台管理模板 Bootstrap4 ,ASP.NET Core,EF Core,JWT

    拥有一个美观好用的网站后台,是很多开发者的梦想,笔者在闲暇时间里搭建了一个不错的后台框架,这里分享诸位开发同仁. 项目地址:https://github.com/kongdf123/KentNoteB ...

  5. 《一张图看懂华为云BigData Pro鲲鹏大数据解决方案》

    8月27日,华为云重磅发布了业界首个鲲鹏大数据解决方案--BigData Pro.该方案采用基于公有云的存储与计算分离架构,以可无限弹性扩容的鲲鹏算力作为计算资源,以支持原生多协议的OBS对象存储服务 ...

  6. 基于SCN增量恢复DG同步

    问题描述:做scn恢复备库的测试,吭哧了几天,今天终于可以记录一下,遇到了很多坑,作为初学者可以更好地理解DG,主要先关闭备库,在主库做归档丢失备库无法同步,备库产生GAP,然后增量备份恢复备库,版本 ...

  7. Windows下利用IIS建立网站并实现局域网共享

    https://blog.csdn.net/qq_41485414/article/details/82754252 https://www.cnblogs.com/linuxprobe-sarah/ ...

  8. 2017 ACM/ICPC 沈阳 G题 Infinite Fraction Path

    The ant Welly now dedicates himself to urban infrastructure. He came to the kingdom of numbers and s ...

  9. java概述和java环境按照,java开发体验

    java概述: Java的发展可以归纳如下的几个阶段. (1)第一阶段(完善期):JDK 1.0 ( 1995年推出)一JDK 1.2 (1998年推出,Java更名为Java 2): (2)第二阶段 ...

  10. JS中forEach和map的区别

    共同点: 1.都是循环遍历数组中的每一项. 2.forEach()和map()里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input. 3.匿名函数中 ...