keep-alive的使用场景

 <div id="app"><!-- 为了避免频繁的创建，消耗较大的常用组件，缓存时正解，ABC组件的频繁创建 --><!-- 根目录如果时router-view可用router-view --><keep-alive   :include="cached" :exclude="noCached"><aa v-if="current==='A'"></aa><bb v-if="current==='B'"></bb><cc v-if="current==='C'"></cc></keep-alive><button @click="current= 'A'">A存在，销毁BC</button><button @click="current= 'B'">B存在，销毁AC</button><button @click="current= 'C'">C存在，销毁AB</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><script>//常用页面的缓存设计//产品设计：项目长时间不关，导致内存占用，使用比较卡//需求设计：了解用户常用的页面//A用户的常用页面可能和B用户不同//有必要在埋点的时候，记录用户常用浏览页面，并保存到数据库//页面加载的时候动态获取就是下方这两个值可以由后端获取，让用户经常浏览的页面缓存起来下次打开更快const cached=['aa','bb']; //缓存时根据【组件名】 不是route中的name const noCached=['cc'];//当前有3个组件，请你想成300个页面//会在用户的使用下进行切换，toB，长时间不关闭let AComponent={template:`<button>AA</button>`,beforeDestroy(){console.log('A组件被销毁了');}}let BComponent={template:`<button>BB</button>`,beforeDestroy(){console.log('B组件被销毁了');}}let CComponent={template:`<button>CC</button>`,beforeDestroy(){console.log('c组件被销毁了');}}Vue.component('aa',AComponent)Vue.component('bb',BComponent)Vue.component('cc',CComponent)new Vue({el:'#app',data(){return{current:'A',cached,noCached  }}})</script>

keep-alive的使用场景相关推荐

opc ua java订阅_OPC UA的监控项、订阅、和通知
MonitoredItem 每个监控项均指明了要监控的项目(item)和用来发送通知的订阅. item可以是一个节点的属性(node attribute). MonitorItem可以监控一个属性,一 ...
vue进入页面执行的钩子函数_深入理解Vue 的钩子函数
前言说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子( created , mounted ),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中 ...
高并发场景下的httpClient优化使用
https://www.cnblogs.com/bethunebtj/p/8493379.html 1.背景我们有个业务,会调用其他部门提供的一个基于http的服务,日调用量在千万级别.使用了htt ...
mysql 使用场景_MySQLMHA典型使用场景
1 管理节点部署位置1.1. Dedicated Manager server and multiple MySQL (master,slaves) servers 使用专用的管理服务 1 管理节点部 ...
场景7:带有Linux网桥的提供商网络
此场景描述了使用带有Linux网桥的ML2插件的OpenStack网络服务的供应商网络实现. 供应商网络通常以灵活性为代价提供简单性.性能和可靠性.与其他场景不同,只有管理员可以管理提供者网络,因为它 ...
TPP稳定性之场景隔离和多租户
TPP有3600+个场景,每个场景是一些AB(算法方案代码+业务配置+流量分配策略)的集合,场景按业务团队划分物理集群,同一个物理集群内的容器是对等的,JVM内部署着算法容器,算法容器内混布相同的场 ...
ES-PHP 聚合查询时 No alive nodes found in your cluster
文章目录场景过程解决场景一个聚合查询,时间范围短时,正常响应; 时间范围长时,异常:查看日志 No alive nodes found in your cluster 线下环境限于数据量的问 ...
MQTT心跳 Keep Alive
误区 Keep Alive指定连接最大空闲时间T,当客户端检测到连接空闲时间超过T时,必须向Broker发送心跳报文PINGREQ,Broker收到心跳请求后返回心跳响应PINGRESP.若Broke ...
【3D游戏编程与设计】四游戏对象与图形基础 : 构建游戏场景+牧师与魔鬼动作分离版
[3D游戏编程与设计]四游戏对象与图形基础 : 构建游戏场景+牧师与魔鬼动作分离版基本操作演练下载 Fantasy Skybox FREE, 构建自己的游戏场景下载 Fantasy Skyb ...
远程诊断DoIP（笔记一）场景和原理
根据互联网中的定义, OSI模型中,由软件(进程)或者硬件(输入/输出芯片)实现的活跃部分称之为实体Entity,用于进行信息的发送或者接收.实体是子系统中的活动单元,每一层被拆分成多个实体,同一层内 ...

keep-alive的使用场景

keep-alive的使用场景相关推荐

最新文章

热门文章