位置: IT常识 - 正文

Vue中keep-alive原理(vue keep-alive实现原理)

编辑:rootadmin
Vue中keep-alive原理 定义

推荐整理分享Vue中keep-alive原理(vue keep-alive实现原理),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue中keepalive的用法优缺点,vue keep-live,keepalived vue,vue中keepalive的用法优缺点,vue中keepalive原理,vue keep-live,vue中keepalive原理,vue中keep alive,内容如对您有帮助,希望把文章链接给更多的朋友!

keep-alive是Vue中内置的一个抽象组件。它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

keep-alive是用来缓存组件的,比如我们有个列表页,在点击详情页之后,如果返回之后不想刷新列表页,就可以用keep-alive组件进行缓存。除此以外,还有很多应用场景。

用法

用法1:我们想要缓存某个组件,只要用keep-alive组件将其包裹就行。

<keep-alive> <component></component></keep-alive>

用法2:包裹component组件缓存动态组件,或者包裹router-view缓存路由页面,也就是keep-alive配合路由守卫(元信息)实现缓存。

比如常在router.js路由表里定义好哪些页面需要缓存,就可以通过下面这样实现了:

{path: "/index",name: 'index', component: () => import(/* webpackChunkName: "index" */ '@/pages/index'),meta: {title: '首页', keepAlive: true}}<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive && isRouterAlive"></router-view>属性include - 逗号分隔字符串或正则表达式或一个数组来表示。只有名称匹配的组件会被缓存。exclude - 逗号分隔字符串或正则表达式或一个数组来表示。任何名称匹配的组件都不会被缓存。max - 数字。最多可以缓存多少组件实例。

include 和 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属性,并且要和include,exclude给定的值一致

生命周期钩子

keep-alive提供了两个生命钩子,分别是activated与deactivated。

Vue中keep-alive原理(vue keep-alive实现原理)

因为keep-alive会将组件保存在内存中,并不会销毁以及重新创建,所以不会重新调用组件的created等方法,需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。

组件一旦被keep-alive缓存,那么再次渲染的时候就不会执行 created、mounted 等钩子函数。使用keep-alive组件后,被缓存的组件生命周期会多activated和deactivated 两个钩子函数,它们的执行时机分别是keep-alive包裹的组件激活时调用和停用时调用。

源码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.default const vnode = getFirstComponentChild(slot) /* 获取该组件节点的componentOptions */ const componentOptions = vnode && vnode.componentOptions if (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 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 if (cache[key]) { vnode.componentInstance = cache[key].componentInstance // make current key freshest remove(keys, key) keys.push(key) } else { cache[key] = vnode keys.push(key) // prune oldest entry if (this.max && keys.length > parseInt(this.max)) { pruneCacheEntry(cache, keys[0], keys, this._vnode) } } vnode.data.keepAlive = true } return vnode || (slot && slot[0]) }}

可以看到,它有3个属性,即有3个props。此外,它有created,destroyed,mounted,render四个钩子。

原理created和destroyed钩子created钩子会创建一个cache对象,用来作为缓存容器,保存vnode节点。destroyed钩子则在组件被销毁的时候清除cache缓存中的所有组件实例。created () { /* 缓存对象 */ this.cache = Object.create(null) this.keys = []},/* destroyed钩子中销毁所有cache中的组件实例 */destroyed () { for (const key in this.cache) { pruneCacheEntry(this.cache, key, this.keys) }},render钩子

keep-alive实现缓存的核心代码就在这个钩子函数里。

先获取到插槽里的内容调用getFirstComponentChild方法获取第一个子组件,获取到该组件的name,如果有name属性就用name,没有就用tag名。/* 获取该组件节点的名称 */const name = getComponentName(componentOptions)/* 优先获取组件的name字段,如果name不存在则获取组件的tag */function getComponentName (opts: ?VNodeComponentOptions): ?string {return opts && (opts.Ctor.options.name || opts.tag)}接下来会将这个name通过include与exclude属性进行匹配,匹配不成功(说明不需要进行缓存)则不进行任何操作直接返回这个组件的 vnode(vnode是一个VNode类型的对象),否则的话走下一步缓存。匹配:/* 检测name是否匹配 */function matches (pattern: string | RegExp, name: string): boolean { if (typeof pattern === 'string') { /* 字符串情况,如a,b,c */ return pattern.split(',').indexOf(name) > -1 } else if (isRegExp(pattern)) { /* 正则 */ return pattern.test(name) } /* istanbul ignore next */ return false}

检测include与exclude属性匹配的函数很简单,include与exclude属性支持字符串如"a,b,c"这样组件名以逗号隔开的情况以及正则表达式。matches通过这两种方式分别检测是否匹配当前组件。

const { include, exclude } = this/* 如果name与include规则不匹配或者与exclude规则匹配则表示不缓存,直接返回vnode */if ( (include && (!name || !matches(include, name))) || // excluded (exclude && name && matches(exclude, name))) { return vnode}缓存机制:接下来的事情很简单,根据key在this.cache中查找,如果存在则说明之前已经缓存过了,直接将缓存的vnode的componentInstance(组件实例)覆盖到目前的vnode上面。否则将vnode存储在cache中。最后返回vnode(有缓存时该vnode的componentInstance已经被替换成缓存中的了)。缓存的处理:/* 如果命中缓存,则直接从缓存中拿 vnode 的组件实例 */if (cache[key]) { vnode.componentInstance = cache[key].componentInstance /* 调整该组件key的顺序,将其从原来的地方删掉并重新放在最后一个 */ remove(keys, key) keys.push(key)} /* 如果没有命中缓存,则将其设置进缓存 */else { cache[key] = vnode keys.push(key) /* 如果配置了max并且缓存的长度超过了this.max,则从缓存中删除第一个 */ if (this.max && keys.length > parseInt(this.max)) { pruneCacheEntry(cache, keys[0], keys, this._vnode) }}/* 最后设置keepAlive标记位 */vnode.data.keepAlive = true

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

如果没有命中缓存,即该组件还没被缓存过,则以该组件的key为键,组件vnode为值,将其存入this.cache中,并且把key存入this.keys中。此时再判断this.keys中缓存组件的数量是否超过了设置的最大缓存数量值this.max,如果超过了,则把第一个缓存组件删掉。

为什么要删除第一个缓存组件并且为什么命中缓存了还要调整组件key的顺序?这其实应用了一个缓存淘汰策略LRU: LRU(Least recently used,最近最少使用)算法根据数据的历史访问记录来进行淘汰数据,其核心思想是“如果数据最近被访问过,那么将来被访问的几率也更高”。

this.keys的逻辑:

将新数据从尾部插入到this.keys中每当缓存命中(即缓存数据被访问),则将数据移到this.keys的尾部当this.keys满的时候,将头部的数据丢弃mounted钩子

在这个钩子函数里,调用了pruneCache方法,以观测 include 和 exclude 的变化。

mounted () { this.$watch('include', val => { pruneCache(this, name => matches(val, name)) }) this.$watch('exclude', val => { pruneCache(this, name => !matches(val, name)) }) },watch: { /* 监视include以及exclude,在被修改的时候对cache进行修正 */ include (val: string | RegExp) { pruneCache(this.cache, this._vnode, name => matches(val, name)) }, exclude (val: string | RegExp) { pruneCache(this.cache, this._vnode, name => !matches(val, name)) }},

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

function pruneCache (keepAliveInstance, filter) { const { cache, keys, _vnode } = keepAliveInstance for (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对象删除即可。

总结

Vue.js内部将DOM节点抽象成了一个个的VNode节点,keep-alive组件的缓存也是基于VNode节点的而不是直接存储DOM结构。它将满足条件(pruneCache与pruneCache)的组件在cache对象中缓存起来,在需要重新渲染的时候再将vnode节点从cache对象中取出并渲染。

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

上一篇:Vue语法与标签的使用(vue fragment标签)

下一篇:【vue】 配置代理(vue3.0配置代理)

  • 不能打动客户?学会这6个营销原理,就知道原因了……(不能打动客户的成语)

    不能打动客户?学会这6个营销原理,就知道原因了……(不能打动客户的成语)

  • 微信怎么添加孩子的医保电子凭证(微信里怎么添加孩子的医保卡)

    微信怎么添加孩子的医保电子凭证(微信里怎么添加孩子的医保卡)

  • 小米13系统怎么隐藏小部件名称(小米13系统怎么退回之前版本)

    小米13系统怎么隐藏小部件名称(小米13系统怎么退回之前版本)

  • 健康码怎么解绑家人(健康码怎么解绑家庭成员)

    健康码怎么解绑家人(健康码怎么解绑家庭成员)

  • 抖音如何隐身看直播(抖音如何隐身看别人主页)

    抖音如何隐身看直播(抖音如何隐身看别人主页)

  • 微信里的引用功能怎么用(微信里面的引用是什么)

    微信里的引用功能怎么用(微信里面的引用是什么)

  • 主板亮黄灯无法开机(主板亮黄灯无法上网怎么办)

    主板亮黄灯无法开机(主板亮黄灯无法上网怎么办)

  • 服务器已停止响应是怎么回事(服务器已停止响应是什么意思)

    服务器已停止响应是怎么回事(服务器已停止响应是什么意思)

  • mate30分屏怎么恢复(华为mate30分屏功能怎么恢复)

    mate30分屏怎么恢复(华为mate30分屏功能怎么恢复)

  • 停电后路由器连不上网(停电后路由器连接不上)

    停电后路由器连不上网(停电后路由器连接不上)

  • newpad是ipad几(ipad newpad)

    newpad是ipad几(ipad newpad)

  • iphone怎么显示airpods电量(IPhone怎么显示海拔信息)

    iphone怎么显示airpods电量(IPhone怎么显示海拔信息)

  • 微信辅助都需要什么(微信辅助都需要人脸吗)

    微信辅助都需要什么(微信辅助都需要人脸吗)

  • vivo怎样设置sos(vivo怎样设置sos紧急联络)

    vivo怎样设置sos(vivo怎样设置sos紧急联络)

  • iphone7p支持pd快充吗(iphone7p是否支持快充)

    iphone7p支持pd快充吗(iphone7p是否支持快充)

  • iphone怎么给相册加密(iPhone怎么给相册上密码)

    iphone怎么给相册加密(iPhone怎么给相册上密码)

  • vivo手机字体如何调大(Vivo手机字体如何放大)

    vivo手机字体如何调大(Vivo手机字体如何放大)

  • 苹果x耗电快怎么解决(苹果x耗电快怎么解决 具体解决方法)

    苹果x耗电快怎么解决(苹果x耗电快怎么解决 具体解决方法)

  • 三星s5怎么开4g(三星s5如何设置4g网络设置)

    三星s5怎么开4g(三星s5如何设置4g网络设置)

  • 拼多多会员名是什么(拼多多会员号是什么)

    拼多多会员名是什么(拼多多会员号是什么)

  • 华为畅享10plus上市时间(华为畅享10)

    华为畅享10plus上市时间(华为畅享10)

  • 王卡暂停服务怎么恢复(手机王卡暂停服务了,要怎么样才可以重新开通)

    王卡暂停服务怎么恢复(手机王卡暂停服务了,要怎么样才可以重新开通)

  • ios截图编辑怎么关闭(iphone截图编辑功能)

    ios截图编辑怎么关闭(iphone截图编辑功能)

  • 猎豹安全大师如何卸载(猎豹安全大师怎么样)

    猎豹安全大师如何卸载(猎豹安全大师怎么样)

  • 手机卡是怎么回事(手机卡是怎么回事呀手机里面抖音卡是怎么回事啊)

    手机卡是怎么回事(手机卡是怎么回事呀手机里面抖音卡是怎么回事啊)

  • 增值税退税账务处理最新规定
  • 税前扣除项目包括
  • 增值税减免税申报明细表免税代码和名称
  • 建筑企业开票都开什么
  • 房地产企业毛利率计算公式是什么
  • 房地产开发企业预收款预缴增值税
  • 兼营行为的税务处理办法
  • 参与工会职工应享受哪些福利待遇
  • 一般纳税人税负率一般控制在多少?法律依据
  • 公司购买的五金工具报销怎么做
  • 收到红字发票会计处理
  • 现金折扣后退回账户
  • 周转材料低值易耗品怎么摊销
  • 个人独资企业是什么类型
  • 过渡期税收优惠政策
  • 购入低值易耗品计入什么科目
  • 公司的资本成本取决于投资人的必要报酬率
  • 预收账款的会计编码是多少?
  • 个人到财务挂账怎么做账
  • 没有及时去做财务会计制度备案怎么办?
  • 发票代码会有一样的吗
  • 加工业务怎么报税的
  • 股权无偿赠与子女怎么办理手续
  • windows11结束任务快捷键
  • 公司装修费用如何入账
  • 已经认证抵扣的发票,发生冲红,要怎么处理
  • 不征税收入用于支出所形成的费用是什么意思
  • nerosmartstart.exe - nerosmartstart是什么进程 作用是什么
  • PHP:pg_convert()的用法_PostgreSQL函数
  • Yii2实现ajax上传图片插件用法
  • 如何认识软件测试
  • java后端代码例子
  • php应用实例
  • 社保新参统委托代发银行
  • 同业代付业务会计核算
  • 紫白择日法实例详解
  • 建筑业成本需要摊销吗
  • 异地项目增值税要异地缴纳吗
  • 有形动产经营性租赁光租业务是什么意思
  • 出借和出租包装物会计分录是什么
  • 以旧换新价格怎么确认
  • 实收资本的印花税什么时候申报
  • 一次性收取的房租如何做账
  • 网银退回是什么意思
  • 企业购买的结构性存款怎样做账
  • 需要安装的固定资产有哪些
  • 企业债与公司债的还款有区别
  • mysql8.0.23
  • sql server 2019自定义安装教程
  • MySQL数据库常见的几种约束有哪些
  • win8.1官方
  • Win10应用商店下载错误
  • 如何设置微信语音来电铃声
  • fedora32
  • VMware虚拟机安装Ubuntu22.04详细图文教程 原
  • Win7中Remote Procedure Call(RPC)服务能关闭吗
  • macoshosts文件位置
  • WIN7系统怎么安装 注音输入法
  • win7系统所有软件打不开
  • win10开机出现microsoft
  • WIN10更新失败
  • linux gtk+
  • win10预览体验win11
  • linux file-nr
  • android如何导入文件
  • cocos2dx 教程
  • 被调用的对象已与其客户端断开连接怎么办
  • Node.js中的什么模块是用于处理文件和目录的
  • shell命令读取文件并新增另一文件到指定行
  • linux bash脚本
  • Base64、DES、MD5加密解密原理
  • js判断iframe是否加载完成
  • javascript基础
  • 深圳市的各区域排名
  • 汽车买保险车船税是什么意思
  • 潍坊市滨海经济开发区属于哪里
  • 山西省地方税务局通用定额发票
  • 辽宁网上税务
  • 广东佛山税务局人工电话是多少
  • 2021房屋退税流程怎么操作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设