vue的内置组件keep-alive都做了什么

keep-alive我想大家都不陌生,它能在组件切换过程中将状态保留在内存中,防止重复渲染DOM,确保高效渲染时节约性能。


一、Keep-alive 是什么

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

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

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

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

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

关于keep-alive的基本用法:

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

增加属性includes和exclude:

<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 缓存的组件,会多出两个生命周期钩子(activated与deactivated):

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

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

二、使用场景

1.tab页中有表单输入时,可以设置keep-alive(在你一个tab中输入后,不小心切换后再回来输入的内容被缓存,这一点)

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

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

可以通过路由属性meta中设置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-alive作为vue中内置的一个组件,源码位置:**/src/core/components/keep-alive.js1

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钩子函数中监测 include 和 exclude 的变化,如下:

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


如果 include 或 exclude 发生了变化,即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化,那么就执行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://vue3js.cn/docs/zh

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

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

相关文章

Windows安全应急--反隐身术

NO.1 dir命令 首先做个演示&#xff0c;把演示01这个文件夹隐藏起来&#xff0c; 在文件夹上是看不到了&#xff0c; 我们可以使用dir命令查看&#xff0c; NO.2 文件夹选项–显示隐藏 这个是非常常规的了&#xff0c; 这里不做过多介绍 有些隐藏文件很顽固&#xff0c;上面…

IO系列(八) -浅析NIO工作原理

一、简介 现在使用 NIO 的场景越来越多&#xff0c;很多网上的技术框架或多或少的使用 NIO 技术&#xff0c;譬如 Tomcat、Jetty、Netty&#xff0c;学习和掌握 NIO 技术已经不是一个 Java 攻城狮的加分技能&#xff0c;而是一个必备技能。 那什么是 NIO 呢&#xff1f; NIO…

运维出现的问题 --集成

运维出现的问题 集成 macos 本地打的镜像&#xff0c;推到线上出现 images platform (linux/arm64) does not match the detected解决办法 macos 本地打的镜像&#xff0c;推到线上出现 image’s platform (linux/arm64) does not match the detected WARNING: The requested …

如何使用Android NDK将头像变成“遗像”

看完本文的标题&#xff0c;可能有人要打我。你说黑白的老照片不好吗&#xff1f;非要说什么遗像&#xff0c;我现在就把你变成遗像&#xff01;好了&#xff0c;言归正传。我想大部分人都用过美颜相机或者剪映等软件吧&#xff0c;它们的滤镜功能是如何实现的&#xff0c;有人…

1653jsp在线学习交流平台Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java 在线学习交流平台系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统采用web模式&#xff0c;系统主要采用B/S模式开发。开发环境 为TOMCAT7.0,Myeclipse8.5开发&#x…

warning: ‘struct timespec‘ declared inside parameter list

交叉编译程序时&#xff0c;编译报错&#xff0c;错误如下&#xff1a; ./lib/libgpiod/gpiod.h:204:24: warning: struct timespec declared inside parameter list const struct timespec *, void *); ./lib/libgpiod/gpiod.h:367:4: warning: struct timespec d…

AWS安全性身份和合规性之Identity and Access Management(IAM)

通过AWS Identity and Access Management&#xff08;IAM&#xff09;&#xff0c;您可以指定谁或什么能够访问AWS中的服务和资源、集中管理精细权限&#xff0c;并分析访问权限以优化跨AWS的权限。 比如一家软件开发公司需要在AWS上创建多个开发人员账户&#xff0c;并对其进…

React Native 之 Flexbox 布局(五)

在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。 使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。 React Native 中的 Flexbox 的工作原理和 web 上的 CSS基本一…

[Algorithm][动态规划][路径问题][不同路径][不同路径Ⅱ][珠宝的最高价值]详细讲解

目录 1.不同路径1.题目链接2.算法原理详解3.代码实现 2.不同路径 II1.题目链接2.算法原理详解3.代码实现 3.珠宝的最高价值1.题目链接2.算法原理详解3.代码实现 1.不同路径 1.题目链接 不同路径 2.算法原理详解 思路&#xff1a; 确定状态表示 -> dp[i][j]的含义 走到dp[…

Excel 多行表头的列转行

Excel中A3:F6是带表头的典型表格&#xff0c;但上面多了额外的两行表头&#xff1a; ABCDEF1ActualsActualsPlanPlan2FY20FY21FY20FY213CountryOwner1/1/20201/1/20201/1/20201/1/20204FranceRichard100150801605FranceMartin1201401301406FrancePierre501005080 现在要将典型…

超简单白话文机器学习-朴素贝叶斯算法(含算法讲解,公式全解,手写代码实现,调包实现

1. 朴素贝叶斯算法 朴素贝叶斯&#xff08;Naive Bayes&#xff09;算法是一类基于贝叶斯定理的简单而强大的概率分类器&#xff0c;它在假设特征之间相互独立的前提下工作。尽管这种“朴素”的假设在现实中很少成立&#xff0c;但朴素贝叶斯分类器在许多实际应用中表现良好&am…

5G工业数采网关是什么?天拓四方

随着工业4.0时代的到来&#xff0c;数字化、网络化、智能化成为工业发展的新趋势。在这个过程中&#xff0c;5G工业数采网关作为一种关键设备&#xff0c;发挥着越来越重要的作用。本文将详细解析5G工业数采网关是什么&#xff0c;以及它在工业领域中的应用和重要性。 一、5G工…

保研面试408复习 5——操作系统(死锁)、计网(TCP和UDP)

文章目录 1、操作系统一、死锁的定义、原因和必要条件a.死锁的定义b.死锁的原因c.死锁产生的必要条件 二、如何预防死锁&#xff1f; 2、计算机网络一、TCP和UDP的相同点二、TCP和UDP的区别 标记文字记忆&#xff0c;加粗文字注意&#xff0c;普通文字理解。 1、操作系统 一、…

领域知识 | 智能驾驶安全领域部分常见概论

Hi&#xff0c;早。 最近想买个新能源车&#xff0c;这个车吧相比于之前的内燃车&#xff0c;新能源车与外界的交互多了很多。比如娱乐的第三方应用&#xff0c;OTA升级等应用。 交互带来的便利越多&#xff0c;暴露的风险自然也就越大&#xff0c;相比于手机等消费者终端设备…

【GDAL】GDAL库学习(C#版本)

1.GDAL 2.VS2022配置GDAL环境&#xff08;C#&#xff09; VS2022工具–NuGet包管理器–管理解决方案的NuGet程序包&#xff0c;直接安装GDAL包。 并且直接用应用到当前的控制台程序中。 找一张tiff格式的图片&#xff0c;或者用格式转换网站&#xff1a;https://www.zamzar.c…

MySQL 字符字段长度设置详解:语法、注意事项和示例

本文将详细介绍在 MySQL 数据库中如何设置字符字段的长度。将介绍字符字段的数据类型、长度限制、语法示例&#xff0c;并提供具体的示例&#xff0c;以正确设置和管理字符字段的长度。 1. MySQL 字符字段长度概述 在 MySQL 中&#xff0c;字符字段是用于存储文本型数据的列。…

TIMESTAMP之2038年

TIMESTAMP 数据类型的存储上限。实际上&#xff0c;TIMESTAMP 类型在不同的数据库系统中有着不同的存储上限。 TIMESTAMP占用4个字节、并且查询的时候系统会帮你自动转成&#xff08;Y-m-d H:i:s),可读性强&#xff0c;可读性与可维护性一举两得 但是&#xff01;&#xff01…

用kimi一键绘制《庆余年》人物关系图谱

《庆余年》里面人物关系复杂&#xff0c;如果能画出一个人物关系图谱&#xff0c;可以直观的理解其中人物关系&#xff0c;更好的追剧。 首先&#xff0c;用kimi下载庆余年的分集剧情&#xff0c;常见文章《AI网络爬虫&#xff1a;批量爬取电视猫上面的《庆余年》分集剧情》&am…

leetcode148-Sort List

题目 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4] 分析 这道题目的思路也比较明确&#xff0c;我们可以用递归排序的思路&#xff0c;先不断拆分链表直到只…

C++三剑客之std::any(二) : 源码剖析

目录 1.引言 2.std::any的存储分析 3._Any_big_RTTI与_Any_small_RTTI 4.std::any的构造函数 4.1.从std::any构造 4.2.可变参数模板构造函数 4.3.赋值构造与emplace函数 5.reset函数 6._Cast函数 7.make_any模版函数 8.std::any_cast函数 9.总结 1.引言 C三剑客之s…