首页 > 其他分享 >keep-alive标签的原理是什么?有什么功能?

keep-alive标签的原理是什么?有什么功能?

时间:2022-10-10 13:35:32浏览次数:53  
标签:缓存 标签 alive keep 组件 列表 页面

、keep-alive是什么
keep-alive是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中;使keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

一个场景
用户在某个列表页面选择筛选条件过滤出一份数据列表,由列表页面进入数据详情页面,再返回该列表页面,我们希望:列表页面可以保留用户的筛选(或选中)状态。
keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单,它还可以避免组件反复创建和渲染,有效提升系统性能。总的来说,keep-alive用于保存组件的渲染状态。

2、keep-alive用法
在动态组件中的应用
<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的策略置换缓存数据。
————————————————
版权声明:本文为CSDN博主「m0_65373673」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/m0_65373673/article/details/122451687

标签:缓存,标签,alive,keep,组件,列表,页面
From: https://www.cnblogs.com/qFire/p/16775355.html

相关文章

  • CVPR2021佳作 | 重新标记ImageNet:从全局标签到局部标签(附github代码及论文)
    “计算机视觉研究院”计算机视觉研究院专栏作者:Edison_GImageNet可以说是最受欢迎的图像分类基准,但它也是一个具有显著噪声的标签。最近的研究表明,许多样本包含多个类,尽管被......
  • MyBatis之ResultMap的association和collection标签详解
    一、前言MyBatis创建时的一个思想是:数据库不可能永远是你所想或所需的那个样子。我们希望每个数据库都具备良好的第三范式或BCNF范式,可惜它们并不都是那样。如果能有一......
  • MyBatis之ResultMap的association和collection标签详解
    一、前言MyBatis创建时的一个思想是:数据库不可能永远是你所想或所需的那个样子。我们希望每个数据库都具备良好的第三范式或BCNF范式,可惜它们并不都是那样。如果能......
  • script 标签 defer 和 async 的区别
    明确:defer和async的使用,可以用于提升网页性能script标签存在两个属性,defer和async,因此script标签的使用分为三种情况:<scriptsrc="example.js"></script>没有defer或......
  • keepalived高可用(haporxy)
    keepalived高可用(haporxy)目录keepalived高可用(haporxy)部署httpd,nginx部署haproxy负载均衡部署keepalived高可用编写脚本配置keepalived加入监控脚本的配置测试keep......
  • zabbix监控部署keepalived高可用
    zabbix监控部署keepalived高可用目录一.脑裂1.对付HA系统“裂脑”的对策,目前达成共识的的大概有以下几条:二.脑裂产生的原因2.1一般来说,脑裂的发生,有以下几种原因:三.脑......
  • a标签下载图片,不要预览
    constdownloadhandler=()=>{constlink=document.createElement('a')//这里是将url转成blob地址将链接地址字符内容转变成blob地址fetch(icoUrl).then......
  • zookeeper下载安装(base)
    1,获取,Apache官网下载 http://zookeeper.apache.org/releases.html我下载下来的,放在网盘上了地址: http://pan.baidu.com/s/1bnm21Jp2,解压出来 tarxvf zookeeper-3.4.......
  • 5 分钟完成 ZooKeeper 数据迁移
    作者:草谷前言MSE提供了托管版的ZooKeeper,包含比开源ZooKeeper更强大更稳定的功能,能帮助您免去运维ZooKeeper集群的烦恼,当我们需要从自建ZooKeeper迁移到MSEZooKee......
  • 5 分钟完成 ZooKeeper 数据迁移
    作者:草谷前言MSE提供了托管版的ZooKeeper,包含比开源ZooKeeper更强大更稳定的功能,能帮助您免去运维ZooKeeper集群的烦恼,当我们需要从自建ZooKeeper迁移到MSEZoo......