【手撕源码】vue2.x中keep-alive源码解析
迪丽瓦拉
2025-05-28 02:58:43
0

🐱 个人主页:不叫猫先生
🙋‍♂️ 作者简介:前端领域新星创作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀!
💫系列专栏:vue3从入门到精通、TypeScript从入门到实践
📢 资料领取:前端进阶资料以及文中源码可以找我免费领取
🔥 前端学习交流:博主建立了一个前端交流群,汇集了各路大神,一起交流学习,期待你的加入!(文末有我wx或者私信)

目录

  • 一、前世尘缘
  • 二、keep-alive内置组件
    • 1.缓存动态组件
    • 2.缓存路由组件
    • 3.原理解析
      • (1)keep-alive 在生命周期中做了什么?
      • (2)源码
      • (3)abstract:true
      • (4)pruneCacheEntry函数
      • (5)render
  • 三、LRU算法

一、前世尘缘

vue中内置组件keep-alive的设计思想源于HTTP中的Keep-Alive模式,Keep-Alive模式避免频繁创建、销毁链接,允许多个请求和响应使用同一个HTTP链接。
HTTP 1.0 中keep-alive默认是关闭的,需要在HTTP头加入"Connection: Keep-Alive",才能启用Keep-Alive;HTTP 1.1中默认启用Keep-Alive,如果加入"Connection: close ",才关闭。目前大部分浏览器都是用HTTP 1.1协议。

二、keep-alive内置组件

作用:动态切换组件时缓存组件实例,避免dom重新渲染。

1.缓存动态组件

当组件为componentOne时缓存该组件实例

  

2.缓存路由组件

注意缓存路由组件vue2.x与vue3.x有区别,vue2.x用法如下:

  

vue3.x用法如下:



3.原理解析

缓存的组件以 [key,vnode] 的形式记录,keys记录缓存的组件key,依据inclued、exclude的值,并且当超过设置的max根据LUR算法进行清除。vue2.x和vue3.x相差不大。

(1)keep-alive 在生命周期中做了什么?

  • created:初始化catch,keys。catch是一个缓存组件虚拟dom的数组,其中数组中对象的key是组件的key,value是组件的虚拟dom;keys是一个用来缓存组件的key的数组。
  • mounted:实时监听include、exclude属性的变化,并执行相应操作。
  • destroyed:删除掉所有缓存相关的数据。

(2)源码

地址:源码地址

// 源码位置:src/core/components/keep-alive.js
export default {name: 'keep-alive',abstract: true,props: {include: patternTypes,exclude: patternTypes,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.cacheVNode()// 这里借助 watch 监控 include  和 exclude // 如果有变化的话,则按照最新的 include 和 exclude 更新 this.cache// 将不满足 include、exclude 限制的 缓存vnode 从 this.cache 中移除  this.$watch('include', val => {pruneCache(this, name => matches(val, name))})this.$watch('exclude', val => {pruneCache(this, name => !matches(val, name))})},updated() {this.cacheVNode()},methods:{cacheVNode() {const { cache, keys, vnodeToCache, keyToCache } = thisif (vnodeToCache) {const { tag, componentInstance, componentOptions } = vnodeToCachecache[keyToCache] = {name: _getComponentName(componentOptions),tag,componentInstance}keys.push(keyToCache)// prune oldest entryif (this.max && keys.length > parseInt(this.max)) {pruneCacheEntry(cache, keys[0], keys, this._vnode)}this.vnodeToCache = null}}},render(){//下面详细介绍}
}

(3)abstract:true

设置为true时,表面该组件为抽象组件,抽象组件不会和子组件建立父子关系,组件实例会根据这个属性决定是否忽略该组件,所以并不会有节点渲染在页面中。

(4)pruneCacheEntry函数

destoryed周期中循环了所有缓存的组件,并用 pruneCacheEntry进行处理,pruneCacheEntry做了什么事?

// src/core/components/keep-alive.jsfunction pruneCacheEntry (cache: VNodeCache,key: string,keys: Array,current?: VNode
) {const cached = cache[key]if (cached && (!current || cached.tag !== current.tag)) {cached.componentInstance.$destroy() // 执行组件的destory钩子函数}cache[key] = null  // cache中对象的key设为nullremove(keys, key) // 删除keys对应的元素
}

destoryed周期中,删除缓存组件的所有数组,pruneCacheEntry主要做了这几件事:

  • 遍历缓存组件集合(cach),对所有缓存的组件执行$destroy方法
  • 清除cache中key的值
  • 清除keys中的key

(5)render

render中主要做了什么?

  • 获取keep-alive组件子节点中第一个组件的vnode、componentOptions、name
  • 如果name存在且不在include中或者存在在exclude中,则返回虚拟dom。此时该组件并没有使用缓存。
  • 接下来就是上面的else情况:使用keep-alive进行组件缓存,根据组件id,tag生成组件的key,如果cache集合中存在以key为属性名的vdom,,说明组件已经缓存过,则将缓存的 Vue 实例赋值给 vnode.componentInstance,从keys中删除key,再把key push导keys中,保证当前key在keys的最后面(这是LRU算法的关键)。如果不存在则继续走下面
  • 如果cach[key]不存在则为第一次加载组件,则把vdom赋值给cach[key],key push到key
  • 如果keys的长度大于max,则进行组件缓存清理,则把不经常使用的被缓存下来的在keys中排第一位的组件清除掉,清除也是调用的pruneCacheEntry方法
render () {// 获取 keep-alive 组件子节点中的第一个组件 vnodeconst slot = this.$slots.defaultconst vnode = getFirstComponentChild(slot)// 获取组件的配置选项对象const componentOptions = vnode && vnode.componentOptionsif (componentOptions) {// 获取组件的名称const name = _getComponentName(componentOptions)const { include, exclude } = this// 如果当前的组件 name 不在 include 中或者组件的 name 在 exclude 中// 说明当前的组件是不被 keep-alive 所缓存的,此时直接 return vnode 即可if (// not included(include && (!name || !matches(include, name))) ||// excluded(exclude && name && matches(exclude, name))) {return vnode}// 代码执行到这里,说明当前的组件受 keep-alive 组件的缓存const { cache, keys } = this// 定义 vnode 缓存用的 keyconst 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// 如果 cache[key] 已经存在的话,则说明当前的组件 vnode 已经被缓存过了,此时需要将其恢复还原出来if (cache[key]) {// 将缓存的 Vue 实例赋值给 vnode.componentInstancevnode.componentInstance = cache[key].componentInstance// make current key freshest// 先从 keys 中移除 key,然后再 push key,这可以保证当前的 key 在 keys 数组中的最后面remove(keys, key)keys.push(key)} else {// delay setting the cache until update// 如果 cache[key] 不存在的话,说明当前的子组件是第一次出现,此时需要将 vnode 缓存到 cache 中,将 key 存储到 keys 字符串数组中。这里是用一个中间变量接收,当数据变化时触发updated去调用cacheVNode方法。this.vnodeToCache = vnodethis.keyToCache = key}// @ts-expect-error can vnode.data can be undefined// 将 vnode.data.keepAlive 属性设置为 true,这对 vnode 有一个标识的作用,标识这个// vnode 是 keep-alive 组件的 render 函数 return 出去的,这个标识在下面的运行代码中有用vnode.data.keepAlive = true}return vnode || (slot && slot[0])}

三、LRU算法

缓存的组件在进行清除的时候使用了LRU算法,具体是什么策略呢?当数据超过了限定空间的时候对数据清理,清理的原则是对很久没有使用到过的数据进行清除

相关内容

热门资讯

linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
C++ 机房预约系统(六):学... 8、 学生模块 8.1 学生子菜单、登录和注销 实现步骤: 在Student.cpp的...
A.机器学习入门算法(三):基... 机器学习算法(三):K近邻(k-nearest neigh...
数字温湿度传感器DHT11模块... 模块实例https://blog.csdn.net/qq_38393591/article/deta...
有限元三角形单元的等效节点力 文章目录前言一、重新复习一下有限元三角形单元的理论1、三角形单元的形函数(Nÿ...
Redis 所有支持的数据结构... Redis 是一种开源的基于键值对存储的 NoSQL 数据库,支持多种数据结构。以下是...
win下pytorch安装—c... 安装目录一、cuda安装1.1、cuda版本选择1.2、下载安装二、cudnn安装三、pytorch...
MySQL基础-多表查询 文章目录MySQL基础-多表查询一、案例及引入1、基础概念2、笛卡尔积的理解二、多表查询的分类1、等...
keil调试专题篇 调试的前提是需要连接调试器比如STLINK。 然后点击菜单或者快捷图标均可进入调试模式。 如果前面...
MATLAB | 全网最详细网... 一篇超超超长,超超超全面网络图绘制教程,本篇基本能讲清楚所有绘制要点&#...
IHome主页 - 让你的浏览... 随着互联网的发展,人们越来越离不开浏览器了。每天上班、学习、娱乐,浏览器...
TCP 协议 一、TCP 协议概念 TCP即传输控制协议(Transmission Control ...
营业执照的经营范围有哪些 营业执照的经营范围有哪些 经营范围是指企业可以从事的生产经营与服务项目,是进行公司注册...
C++ 可变体(variant... 一、可变体(variant) 基础用法 Union的问题: 无法知道当前使用的类型是什...
血压计语音芯片,电子医疗设备声... 语音电子血压计是带有语音提示功能的电子血压计,测量前至测量结果全程语音播报࿰...
MySQL OCP888题解0... 文章目录1、原题1.1、英文原题1.2、答案2、题目解析2.1、题干解析2.2、选项解析3、知识点3...
【2023-Pytorch-检... (肆十二想说的一些话)Yolo这个系列我们已经更新了大概一年的时间,现在基本的流程也走走通了,包含数...
实战项目:保险行业用户分类 这里写目录标题1、项目介绍1.1 行业背景1.2 数据介绍2、代码实现导入数据探索数据处理列标签名异...
记录--我在前端干工地(thr... 这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前段时间接触了Th...
43 openEuler搭建A... 文章目录43 openEuler搭建Apache服务器-配置文件说明和管理模块43.1 配置文件说明...