keep-alive实现原理
1、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的策略置换缓存数据。
keep-alive实现原理相关推荐
- 字节跳动 Java 岗一二三面全经过分享
金三银四才过去没多久,眼看着便又要秋招了,所以为大家写了这篇文章,来自一个刚参加完字节面试并高分通过的朋友亲口所述,除了字节的 offer,他还分别通过了京东.百度以及腾讯阿里巴巴这些公司的面试,所以 ...
- [NXP i.MX6ULL] UBOOT-2020.04
前提说明 操作系统:ubuntu 20.04 硬件环境:野火IMX6ULL NAND 注意有些路径为我自己的本地路径,后期我会完善一些过程. 交叉编译器 Linaro Releases 1. 下载最新 ...
- Rocksdb 写流程,读流程,WAL文件,MANIFEST文件,ColumnFamily,Memtable,SST文件原理详解
文章目录 前言 Rocksdb写流程图 WAL 原理分析 概述 文件格式 查看WAL的工具 创建WAL 清理WAL MANIFEST原理分析 概述 查看MANIFEST的工具 创建 及 清除 MANI ...
- libev源码解析——定时器原理
本文将回答<libev源码解析--I/O模型>中抛出的两个问题.(转载请指明出于breaksoftware的csdn博客) 对于问题1:为什么backend_poll函数需要指定超时?我们 ...
- 内存泄漏的定位与排查:Heap Profiling 原理解析
系统长时间运行之后,可用内存越来越少,甚至导致了某些服务失败,这就是典型的内存泄漏问题.这类问题通常难以预测,也很难通过静态代码梳理的方式定位.Heap Profiling 就是帮助我们解决此类问题的 ...
- python web框架autoreload原理(以bottle为例)
2019独角兽企业重金招聘Python工程师标准>>> 这两天在看bottle的时候,发现它也有代码auto reload的功能,就到它的源码中看了一下. 当设置reloader=T ...
- Spark源码阅读02-Spark核心原理之调度算法
Spark核心原理之调度算法 Spark核心原理之调度算法 应用程序之间 作业及调度阶段之间 1.创建调度池 2.调度池加入调度内容 3.提供已排序的任务集管理器 任务之间 1.数据本地性 2.延迟执 ...
- Elasticsearch分布式一致性原理剖析(一)-节点篇
2019独角兽企业重金招聘Python工程师标准>>> 摘要: ES目前是最流行的开源分布式搜索引擎系统,其使用Lucene作为单机存储引擎并提供强大的搜索查询能力.学习其搜索原理, ...
- Android10.0 BroadcastCast广播机制原理
原文地址:https://skytoby.github.io/2019/BroadcastCast%E5%B9%BF%E6%92%AD%E6%9C%BA%E5%88%B6%E5%8E%9F%E7%90 ...
- SSH原理之图文详解
一.Telnet和SSH 1.Telnet Telnet是一个远程连接服务是一个C/S架构,具有Server端和Client端,Client通过telnet协议连接到服务器端,这是早期常 ...
最新文章
- JavaScript设计模式--简单工厂模式例子---XHR工厂
- 微信红包的架构设计简介
- ComboBox的数据联动
- 第7步 mybatis-generator dao层生成器
- 苹果无线耳机使用方法_苹果官方:如果 AirPods Pro 出现这些问题,我们将免费更换!...
- Java类类getClassLoader()方法及示例
- dy96 .pw cc 05.php,05.php · 熟悉的陌生/php - Gitee.com
- 大话数据结构 -07-1 图的定义、抽象数据类型与存储结构
- 综述:全国软考首遭试卷丢失 20万考生措手不及
- vijos1153猫狗大战
- hadoop+hive+hbase+spark补充内容
- Slider控件的使用方法
- Java数据结构与算法(3) - ch04栈(栈和转置)
- 技术项目 - MySQL多从系统的主库选择
- Atitit.增强系统稳定性----虚拟内存的设置
- 解决gilde加载圆角和CenterCrop冲突的问题
- html5测试网速插件,js 检测客户端网速
- C# 单个按钮实现暂停或继续
- PIC16F877A与Proteus仿真-1位7段数码管驱动
- 基于模型的软件开发方法综述