域名注册网站建设,oppo软件商店官网,架设网站的目的,海外网站seo#x1f431; 个人主页#xff1a;不叫猫先生 #x1f64b;♂️ 作者简介#xff1a;前端领域新星创作者、阿里云专家博主#xff0c;专注于前端各领域技术#xff0c;共同学习共同进步#xff0c;一起加油呀#xff01; #x1f4ab;系列专栏#xff1a;vue3从入门… 个人主页不叫猫先生 ♂️ 作者简介前端领域新星创作者、阿里云专家博主专注于前端各领域技术共同学习共同进步一起加油呀 系列专栏vue3从入门到精通、TypeScript从入门到实践 资料领取前端进阶资料以及文中源码可以找我免费领取 前端学习交流博主建立了一个前端交流群汇集了各路大神一起交流学习期待你的加入(文末有我wx或者私信) 目录一、前世尘缘二、keep-alive内置组件1.缓存动态组件2.缓存路由组件3.原理解析1keep-alive 在生命周期中做了什么2源码3abstract:true4pruneCacheEntry函数5render三、LRU算法一、前世尘缘
vue中内置组件keep-alive的设计思想源于HTTP中的Keep-Alive模式Keep-Alive模式避免频繁创建、销毁链接允许多个请求和响应使用同一个HTTP链接。 HTTP 1.0 中keep-alive默认是关闭的需要在HTTP头加入Connection: Keep-Alive才能启用Keep-AliveHTTP 1.1中默认启用Keep-Alive如果加入Connection: close 才关闭。目前大部分浏览器都是用HTTP 1.1协议。
二、keep-alive内置组件
作用动态切换组件时缓存组件实例避免dom重新渲染。
1.缓存动态组件
当组件为componentOne时缓存该组件实例
keep-alive :includecomponentOne :excludecomponentTwo :maxnum component :iscurrentComponent/component
/keep-alive2.缓存路由组件
注意缓存路由组件vue2.x与vue3.x有区别vue2.x用法如下
keep-alive :includecomponentOne :excludecomponentTwo :maxnum router-view :iscurrentComponent/router-view
/keep-alivevue3.x用法如下
router-view v-slot{ Component }keep-alive :includeincludeListcomponent :isComponent//keep-alive
/router-view3.原理解析
缓存的组件以 [keyvnode] 的形式记录keys记录缓存的组件key依据inclued、exclude的值并且当超过设置的max根据LUR算法进行清除。vue2.x和vue3.x相差不大。
1keep-alive 在生命周期中做了什么
created初始化catchkeys。catch是一个缓存组件虚拟dom的数组其中数组中对象的key是组件的keyvalue是组件的虚拟domkeys是一个用来缓存组件的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(){//下面详细介绍}
}3abstract:true
设置为true时表面该组件为抽象组件抽象组件不会和子组件建立父子关系组件实例会根据这个属性决定是否忽略该组件所以并不会有节点渲染在页面中。
4pruneCacheEntry函数
destoryed周期中循环了所有缓存的组件并用 pruneCacheEntry进行处理pruneCacheEntry做了什么事
// src/core/components/keep-alive.jsfunction pruneCacheEntry (cache: VNodeCache,key: string,keys: Arraystring,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
5render
render中主要做了什么
获取keep-alive组件子节点中第一个组件的vnode、componentOptions、name如果name存在且不在include中或者存在在exclude中则返回虚拟dom。此时该组件并没有使用缓存。接下来就是上面的else情况使用keep-alive进行组件缓存根据组件idtag生成组件的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算法具体是什么策略呢当数据超过了限定空间的时候对数据清理清理的原则是对很久没有使用到过的数据进行清除。
