位置: IT常识 - 正文

【手撕源码】vue2.x中keep-alive源码解析(手撕视频教程全集)

编辑:rootadmin
【手撕源码】vue2.x中keep-alive源码解析

推荐整理分享【手撕源码】vue2.x中keep-alive源码解析(手撕视频教程全集),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:手撕代码题目集锦,手撕代码是指在纸上写吗,手撕算法是什么意思,什么叫手撕代码,什么叫手撕代码,手撕代码题目集锦,手撕代码题目集锦,什么叫手撕代码,内容如对您有帮助,希望把文章链接给更多的朋友!

🐱 个人主页:不叫猫先生 🙋‍♂️ 作者简介:前端领域新星创作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫系列专栏: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时缓存该组件实例

<keep-alive :include="componentOne`" :exclude="componentTwo" :max="num"> <component :is="currentComponent"></component> </keep-alive>2.缓存路由组件【手撕源码】vue2.x中keep-alive源码解析(手撕视频教程全集)

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

<keep-alive :include="componentOne`" :exclude="componentTwo" :max="num"> <router-view :is="currentComponent"></router-view> </keep-alive>

vue3.x用法如下:

<router-view v-slot="{ Component }"> <keep-alive :include="includeList"> <component :is="Component"/> </keep-alive></router-view>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.jsexport 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 } = this if (vnodeToCache) { const { tag, componentInstance, componentOptions } = vnodeToCache cache[keyToCache] = { name: _getComponentName(componentOptions), tag, componentInstance } keys.push(keyToCache) // prune oldest entry if (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<string>, current?: VNode) { const cached = cache[key] if (cached && (!current || cached.tag !== current.tag)) { cached.componentInstance.$destroy() // 执行组件的destory钩子函数 } cache[key] = null // cache中对象的key设为null remove(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 组件子节点中的第一个组件 vnode const slot = this.$slots.default const vnode = getFirstComponentChild(slot) // 获取组件的配置选项对象 const componentOptions = vnode && vnode.componentOptions if (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 缓存用的 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 // 如果 cache[key] 已经存在的话,则说明当前的组件 vnode 已经被缓存过了,此时需要将其恢复还原出来 if (cache[key]) { // 将缓存的 Vue 实例赋值给 vnode.componentInstance vnode.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 = vnode this.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算法,具体是什么策略呢?当数据超过了限定空间的时候对数据清理,清理的原则是对很久没有使用到过的数据进行清除。

本文链接地址:https://www.jiuchutong.com/zhishi/300683.html 转载请保留说明!

上一篇:国内版的ChatGPT弯道超车的机会在哪里?(国内版的chatpdf)

下一篇:【创作赢红包】项目信息分析表

  • 电话订火车票怎么使用(电话订火车票流程)(电话订火车票怎么查询订单)

    电话订火车票怎么使用(电话订火车票流程)(电话订火车票怎么查询订单)

  • 微信打字如何换行(微信打字如何换字体)

    微信打字如何换行(微信打字如何换字体)

  • qq照片怎么删除不掉(qq照片怎么删除重复的照片)

    qq照片怎么删除不掉(qq照片怎么删除重复的照片)

  • 计算器no/c键的意思是什么(计算器上no/c键是什么键它的功能是什么)

    计算器no/c键的意思是什么(计算器上no/c键是什么键它的功能是什么)

  • 手机放视频时屏幕为什么老是黑(手机放视频时屏幕不亮)

    手机放视频时屏幕为什么老是黑(手机放视频时屏幕不亮)

  • m681q是什么型号(m681q是什么型号怎么双清)

    m681q是什么型号(m681q是什么型号怎么双清)

  • 诺基亚是什么系统软件(诺基亚属于什么手机)

    诺基亚是什么系统软件(诺基亚属于什么手机)

  • 抖音头像一天能换几次(抖音头像一天能改几次2022)

    抖音头像一天能换几次(抖音头像一天能改几次2022)

  • 局域网属于互联网吗(局域网的互联)

    局域网属于互联网吗(局域网的互联)

  • 微信的通话记录可以被调出来吗(怎么查微信的通话记录)

    微信的通话记录可以被调出来吗(怎么查微信的通话记录)

  • vivo快充怎么变慢充了(vivo快充怎么变成普通充电了)

    vivo快充怎么变慢充了(vivo快充怎么变成普通充电了)

  • 显示器所显示的信息每秒钟更新的次数为(显示器所显示的像素数量的概念是)

    显示器所显示的信息每秒钟更新的次数为(显示器所显示的像素数量的概念是)

  • 如何把华为手机的通讯录导入苹果(如何把华为手机资料导入oppo手机)

    如何把华为手机的通讯录导入苹果(如何把华为手机资料导入oppo手机)

  • 手机相机网格怎么设置(手机相机网格怎么关闭)

    手机相机网格怎么设置(手机相机网格怎么关闭)

  • 扩列是什么意思(qq扩列是什么意思)

    扩列是什么意思(qq扩列是什么意思)

  • vivoy93如何快速充电(vivoy93s怎)

    vivoy93如何快速充电(vivoy93s怎)

  • 打印机碳粉盒怎么换(打印机碳粉盒怎么放回去)

    打印机碳粉盒怎么换(打印机碳粉盒怎么放回去)

  • 机器人怎么连接网络(科沃斯扫地机器人怎么连接)

    机器人怎么连接网络(科沃斯扫地机器人怎么连接)

  • 转转保卖下单能取消吗(转转保卖下单后不想卖了怎么办)

    转转保卖下单能取消吗(转转保卖下单后不想卖了怎么办)

  • 酷派大神note3的型号是多少(酷派大神note3root)

    酷派大神note3的型号是多少(酷派大神note3root)

  • 小爱音箱歌曲放不出来(小爱音箱歌曲放在哪里)

    小爱音箱歌曲放不出来(小爱音箱歌曲放在哪里)

  • 电商app特点有哪些(电商app的发展现状)

    电商app特点有哪些(电商app的发展现状)

  • JS日期与字符串相互转换(时间格式化YYYY-MM-DD,Dayjs的使用)(js日期字符串转换为指定格式的日期)

    JS日期与字符串相互转换(时间格式化YYYY-MM-DD,Dayjs的使用)(js日期字符串转换为指定格式的日期)

  • 农机企业所得税税率
  • 所得税 扣除
  • 金税盘业务
  • 个人所得税退的多好还是少好
  • 钱已付票未收到分录怎么做
  • 通用机打发票如何验旧
  • 百旺税盘网络连接不上
  • 应收账款计提坏账比例
  • 公司收到转账支票怎么盖章
  • 无形资产根据什么填列资产负债表
  • 溢价或者折价购买债券的会计处理.
  • 出租车行业怎么银行贷款
  • 零退税率可以做免税吗
  • 补去年的税款怎么做账
  • 营改增后附加税费入应交税费还是营业税金及附加
  • 航天开票系统清单流程
  • 金税盘清卡晚了一天会怎么样
  • 企业所得税期间费用明细表
  • 开具增值税专用发票和普通发票的区别
  • 所得税季报填写说明
  • 计提增值税的账务处理小规模
  • 小型微利企业核定征收
  • 增值税加计扣除政策
  • 存货年末余额怎么算出来的
  • 核定征收的企业可以享受税收优惠吗
  • 多交的增值税怎么申报
  • linux系统怎么查看mac地址
  • 长期待摊费用是当月摊销还是次月摊销
  • 出卖固定资产企业处罚
  • Micheldever Wood的蓝铃花,英国汉普郡 (© Hursley/Getty Images Plus)
  • 企业类型变更是什么意思
  • php 二叉树
  • 注销公司财务报表范本
  • 施工单位老板
  • 暂估价是单价还是总价
  • 多模态特征融合pytorch
  • 其他收益和其他收入的区别
  • 公司账户的资金有利息吗
  • 技术研发费用包括哪些
  • 清包工开发票需要注意事项
  • 间接费用会计科目
  • 增值税直接计算法间接计算法举例
  • 预收工程款的会计分录
  • 结账的内容和程序是什么
  • 调研费属于什么会计科目
  • 其他应付款怎么处理
  • 实业投资收益如何
  • 购买理财计入现金流量表什么科目
  • 实物返利的税务处理
  • 收到销货方的返款分录
  • 付当月房租怎么做分录
  • 工资及福利费科目
  • 税务销售滞后是什么意思
  • 企业自建房屋建设方案
  • 财务费用的内容包括哪些
  • 新单位建账怎么做
  • 年中重新建账还要年初数吗?
  • 账户记录试算不平衡说明记账肯定有差错对吗
  • mysql存储数据的原理
  • centos7.6 yum源
  • mysql向指定字段中添加数据
  • 搜狗网络
  • vmware虚拟机步骤
  • ubuntu添加环境变量后黑屏
  • asmproserver.exe是什么进程 asmproserver进程信息查询
  • 如何让win8系统变快
  • Linux中怎么安装nano已经有安装包了
  • nodejs异步处理执行顺序
  • mongo 安装
  • windows批处理命令大全
  • 脚本添加crontab
  • Node.js中child_process实现多进程
  • python制作简单图形
  • javascript基础
  • 超链接打开比较合适的方式是什么
  • 出口退税期限最长几个月以上
  • 苏宁易购的联系电话
  • 税务师事务所企业组织架构
  • 福建省网上税务办事大厅
  • 太原市地税局各分局局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设