keep-alive的理解和使用方法(使用时的生命周期)

文章目录

    • 一、Keep-alive 是什么
    • 二、使用场景
    • 三、原理分析
    • 四、思考题:缓存后如何获取数据
      • beforeRouteEnter
      • actived
    • 参考文献

在这里插入图片描述

一、Keep-alive 是什么

keep-alivevue中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM

keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们

keep-alive可以设置以下props属性:

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存

  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存

  • max - 数字。最多可以缓存多少组件实例

关于keep-alive的基本用法:

<keep-alive><component :is="view"></component>
</keep-alive>

使用includesexclude

<keep-alive include="a,b"><component :is="view"></component>
</keep-alive><!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/"><component :is="view"></component>
</keep-alive><!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']"><component :is="view"></component>
</keep-alive>

匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值),匿名组件不能被匹配

设置了 keep-alive 缓存的组件,会多出两个生命周期钩子(activateddeactivated):

  • 首次进入组件时:beforeRouteEnter > beforeCreate > created> mounted > activated > … … > beforeRouteLeave > deactivated

  • 再次进入组件时:beforeRouteEnter >activated > … … > beforeRouteLeave > deactivated

二、使用场景

使用原则:当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive

举个栗子:

当我们从首页–>列表页–>商详页–>再返回,这时候列表页应该是需要keep-alive

首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存),这时候可以按需来控制页面的keep-alive

在路由中设置keepAlive属性判断是否需要缓存

{path: 'list',name: 'itemList', // 列表页component (resolve) {require(['@/pages/item/list'], resolve)},meta: {keepAlive: true,title: '列表页'}
}

使用<keep-alive>

<div id="app" class='wrapper'><keep-alive><!-- 需要缓存的视图组件 --> <router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><!-- 不需要缓存的视图组件 --><router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

三、原理分析

keep-alivevue中内置的一个组件

源码位置:src/core/components/keep-alive.js

export default {name: 'keep-alive',abstract: true,props: {include: [String, RegExp, Array],exclude: [String, RegExp, Array],max: [String, Number]},created () {this.cache = Object.create(null)this.keys = []},destroyed () {for (const key in this.cache) {pruneCacheEntry(this.cache, key, this.keys)}},mounted () {this.$watch('include', val => {pruneCache(this, name => matches(val, name))})this.$watch('exclude', val => {pruneCache(this, name => !matches(val, name))})},render() {/* 获取默认插槽中的第一个组件节点 */const slot = this.$slots.defaultconst vnode = getFirstComponentChild(slot)/* 获取该组件节点的componentOptions */const componentOptions = vnode && vnode.componentOptionsif (componentOptions) {/* 获取该组件节点的名称,优先获取组件的name字段,如果name不存在则获取组件的tag */const name = getComponentName(componentOptions)const { include, exclude } = this/* 如果name不在inlcude中或者存在于exlude中则表示不缓存,直接返回vnode */if ((include && (!name || !matches(include, name))) ||// excluded(exclude && name && matches(exclude, name))) {return vnode}const { cache, keys } = this/* 获取组件的key值 */const key = vnode.key == null// same constructor may get registered as different local components// so cid alone is not enough (#3269)? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : ''): vnode.key/*  拿到key值后去this.cache对象中去寻找是否有该值,如果有则表示该组件有缓存,即命中缓存 */if (cache[key]) {vnode.componentInstance = cache[key].componentInstance// make current key freshestremove(keys, key)keys.push(key)}/* 如果没有命中缓存,则将其设置进缓存 */else {cache[key] = vnodekeys.push(key)// prune oldest entry/* 如果配置了max并且缓存的长度超过了this.max,则从缓存中删除第一个 */if (this.max && keys.length > parseInt(this.max)) {pruneCacheEntry(cache, keys[0], keys, this._vnode)}}vnode.data.keepAlive = true}return vnode || (slot && slot[0])}
}

可以看到该组件没有template,而是用了render,在组件渲染的时候会自动执行render函数

this.cache是一个对象,用来存储需要缓存的组件,它将以如下形式存储:

this.cache = {'key1':'组件1','key2':'组件2',// ...
}

在组件销毁的时候执行pruneCacheEntry函数

function pruneCacheEntry (cache: VNodeCache,key: string,keys: Array<string>,current?: VNode
) {const cached = cache[key]/* 判断当前没有处于被渲染状态的组件,将其销毁*/if (cached && (!current || cached.tag !== current.tag)) {cached.componentInstance.$destroy()}cache[key] = nullremove(keys, key)
}

mounted钩子函数中观测 includeexclude 的变化,如下:

mounted () {this.$watch('include', val => {pruneCache(this, name => matches(val, name))})this.$watch('exclude', val => {pruneCache(this, name => !matches(val, name))})
}

如果includeexclude 发生了变化,即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化,那么就执行pruneCache函数,函数如下:

function pruneCache (keepAliveInstance, filter) {const { cache, keys, _vnode } = keepAliveInstancefor (const key in cache) {const cachedNode = cache[key]if (cachedNode) {const name = getComponentName(cachedNode.componentOptions)if (name && !filter(name)) {pruneCacheEntry(cache, key, keys, _vnode)}}}
}

在该函数内对this.cache对象进行遍历,取出每一项的name值,用其与新的缓存规则进行匹配,如果匹配不上,则表示在新的缓存规则下该组件已经不需要被缓存,则调用pruneCacheEntry函数将其从this.cache对象剔除即可

关于keep-alive的最强大缓存功能是在render函数中实现

首先获取组件的key值:

const key = vnode.key == null? 
componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key

拿到key值后去this.cache对象中去寻找是否有该值,如果有则表示该组件有缓存,即命中缓存,如下:

/* 如果命中缓存,则直接从缓存中拿 vnode 的组件实例 */
if (cache[key]) {vnode.componentInstance = cache[key].componentInstance/* 调整该组件key的顺序,将其从原来的地方删掉并重新放在最后一个 */remove(keys, key)keys.push(key)
} 

直接从缓存中拿 vnode 的组件实例,此时重新调整该组件key的顺序,将其从原来的地方删掉并重新放在this.keys中最后一个

this.cache对象中没有该key值的情况,如下:

/* 如果没有命中缓存,则将其设置进缓存 */
else {cache[key] = vnodekeys.push(key)/* 如果配置了max并且缓存的长度超过了this.max,则从缓存中删除第一个 */if (this.max && keys.length > parseInt(this.max)) {pruneCacheEntry(cache, keys[0], keys, this._vnode)}
}

表明该组件还没有被缓存过,则以该组件的key为键,组件vnode为值,将其存入this.cache中,并且把key存入this.keys

此时再判断this.keys中缓存组件的数量是否超过了设置的最大缓存数量值this.max,如果超过了,则把第一个缓存组件删掉

四、思考题:缓存后如何获取数据

解决方案可以有以下两种:

  • beforeRouteEnter

  • actived

beforeRouteEnter

每次组件渲染的时候,都会执行beforeRouteEnter

beforeRouteEnter(to, from, next){next(vm=>{console.log(vm)// 每次进入路由执行vm.getData()  // 获取数据})
},

actived

keep-alive缓存的组件被激活的时候,都会执行actived钩子

activated(){this.getData() // 获取数据
},

注意:服务器端渲染期间avtived不被调用

参考文献

  • https://www.cnblogs.com/dhui/p/13589401.html
  • https://www.cnblogs.com/wangjiachen666/p/11497200.html
  • https://vue3js.cn/docs/zh

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/3573.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PostgreSQL的扩展(extensions)-常用的扩展之pg_stat_statements

PostgreSQL的扩展&#xff08;extensions&#xff09;-常用的扩展之pg_stat_statements 基础信息 OS版本&#xff1a;Red Hat Enterprise Linux Server release 7.9 (Maipo) DB版本&#xff1a;16.2 pg软件目录&#xff1a;/home/pg16/soft pg数据目录&#xff1a;/home/pg16/…

java解析PDF、WORD获取中的表格以及文本内容

近期因工作需要需要解析PDF&#xff0c;需要把PDF中的文本和表格分离&#xff0c;最终要实现的目标是PDF中的文本内容放一块&#xff0c;表格内容放一块&#xff0c;以list的形式存储。解析PDF的技术有很多&#xff0c;经过多次尝试发现使用AdobeAcrobat可以实现表格和文本分离…

TensorFlow轻松入门(一)(更新中)

常见模块 tf. &#xff1a;包含了张量定义&#xff0c;变换等常用函数和类&#xff1b;tf.data&#xff1a;输入数据处理模块&#xff0c;提供了像tf.data.Dataset等类用于封装输入数据&#xff0c;指定批量大小等&#xff1b;tf.image&#xff1a;图像处理模块&#xff0c;提…

el-form 表单设置某个参数非必填验证

html <el-form ref"form" :rules"rules"><el-form-item prop"tiktokEmail" label"邮箱" ><el-input v-model"form.tiktokEmail" placeholder"邮箱" ></el-input></el-form-item&…

mybatis中foreach使用

一、foreach 属性使用 <foreach collection"list" index"index" item"mchntCd" open"(" close")" separator",">#{mchntCd} </foreach>item&#xff1a; 集合中元素迭代时的别名&#xff0c;该参数为…

项目实战:Qt获取CTP量化交易接口测试数据工具 v1.0.0(获取深度行情数据、订阅取消订阅)

若该文为原创文章&#xff0c;转载请注明出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/137937666 红胖子(红模仿)的博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结…

VSCODE自定义代码片段简述与基础使用

目录 一、 简述二 、 基础使用说明2.1 新建一个代码块工作区间2.2 语法 三、 示例四、 参考链接 一、 简述 VSCode的自定义代码片段功能允许开发者根据自己的需求定义和使用自己的代码片段&#xff0c;从而提高编码效率。 优点: 提高效率&#xff1a; 自定义代码片段能够减少…

springboot+Vue实现分页

文章目录 一、后端二、前端 今天开发的有一个场景就是需要从远程ssh服务器上加载一个文件展示到前端&#xff0c;但是一次性拉过来有几万条数据&#xff0c;一下载加载整个文件会导致前端非常非常的卡&#xff0c;于是要使用分页解决&#xff0c;我之前看过的有mybatis的分页查…

乐鑫的ESP32-S3芯片的LE能实现beacon功能吗?

最近帮一个客户做ESP32定位器方案&#xff0c;客户提出这个疑问&#xff0c;乐鑫的ESP32-S3芯片的LE能实现beacon功能吗&#xff1f;针对这个问题&#xff0c;启明云端工程师小启给出这样的回复。 回答是可以的&#xff0c;大家可以看idf的例程。 ESP-IDF iBeacon demo From …

时间,空间复杂度讲解——夯实根基

前言&#xff1a;本节内容属于数据结构的入门知识——算法的时间复杂度和空间复杂度。 时间复杂度和空间复杂度的知识点很少&#xff0c; 也很简单。 本节的主要篇幅会放在使用具体例题来分析时间复杂度和空间复杂度。本节内容适合刚刚接触数据结构或者基础有些薄弱的友友们哦。…

C/C++开发,opencv-ml库学习,随机森林(RTrees)应用

目录 一、随机森林算法 1.1 算法简介 1.2 OpenCV-随机森林&#xff08;Random Forest&#xff09; 二、cv::ml::RTrees应用 2.2 RTrees应用 2.2 程序编译 2.3 main.cpp全代码 一、随机森林算法 1.1 算法简介 随机森林算法是一种集成学习&#xff08;Ensemble Learning&a…

软件著作权合作开发协议撰写指南

由两个以上的自然人、法人或者非法人组织合作开发的软件,其著作权的归属由合作开发者签订书面合同约定。无书面合同或者合同未作明确约定,合作开发的软件可以分割使用的,开发者对各自开发的部分可以单独享有著作权;但是,行使著作权时,不得扩展到合作开发的软件整体的著作…

大语言模型在研究领域的应用——推荐系统中的大语言模型

推荐系统中的大语言模型 大语言模型作为推荐模型基于特定提示的方法基于指令微调的方法大语言模型增强的推荐模型数据输入增强语义表示增强偏好表示增强大语言模型作为推荐模拟器总结应用建议现存问题和未来方向推荐系统的核心在于捕捉并理解用户的潜在偏好,进而为用户推送合适…

Python 语音识别系列-实战学习之初识语音识别

Python 语音识别系列-实战学习之初识语音识别 前言1.语音识别简介2.语音识别的工作原理3.语音识别的基本模块4.语音识别的发展历史5.语音识别的应用场景6.语音识别的Python案例7.总结 前言 在本篇博客中&#xff0c;将介绍语音识别的基础知识&#xff0c;包括其定义、工作原理…

百度沈抖:智能,生成无限可能

4月16日&#xff0c;Create 2024百度AI开发者大会在深圳举行。会上&#xff0c;百度集团执行副总裁、百度智能云事业群总裁沈抖正式发布新一代智能计算操作系统——百度智能云万源。它能管理万卡规模的集群&#xff0c;极致地发挥GPU、CPU的性能&#xff1b;它有强大的大模型作…

本地环境运行Llama 3大型模型:可行性与实践指南

简介&#xff1a; Llama 是由 Meta&#xff08;前身为 Facebook&#xff09;的人工智能研究团队开发并开源的大型语言模型&#xff08;LLM&#xff09;&#xff0c;它对商业用途开放&#xff0c;对整个人工智能领域产生了深远的影响。继之前发布的、支持4096个上下文的Llama 2…

19. TypeScript 类型运算符

TypeScript作为JavaScript的超集&#xff0c;不仅提供了静态类型检查&#xff0c;还引入了多种类型运算符&#xff0c;使得类型定义更加灵活和强大。这些运算符可以帮助我们构建更加精确和灵活的类型定义。本文将详细介绍这些类型运算符的用法和应用场景。 keyof 运算符 keyo…

Python 数据可视化 boxplot

Python 数据可视化 boxplot import pandas as pd import matplotlib.pyplot as plt import numpy as np import seaborn as sns# 读取 TSV 文件 df pd.read_csv(result.tsv, sep\t)normal_df df[df["sample_name"].str.contains("normal")] tumor_df df…

重磅!!!监控分布式NVIDIA-GPU状态

简介&#xff1a;Uptime Kuma是一个易于使用的自托管监控工具&#xff0c;它的界面干净简洁&#xff0c;部署和使用都非常方便&#xff0c;用来监控GPU是否在占用&#xff0c;非常美观。 历史攻略&#xff1a; docker应用&#xff1a;搭建uptime-kuma监控站点 win下持续观察…

新能源汽车电池盒尺寸检测

SNK施努卡电池盒错漏装和尺寸检测 随着环境污染和能源短缺问题日益突出&#xff0c;新能源汽车作为一种环保、可持续的交通工具得到了广泛关注和推广。其中&#xff0c;电池是新能源汽车的核心部件之一&#xff0c;其性能和质量直接影响到整车的续航能力和安全性。而电池盒作为…