Vue2.0源码解析 - 知其然知其所以然之keep-alive原理分析（二）

阳光穿透心脏的1/2处 2022-09-16 03:41 128阅读 0赞

### 前言 ###

> 【一天一个小知识，每天进步一点点】小伙伴们大家好。上一篇文章[Vue2.0源码解析 - 知其然知其所以然之keep-alive原理分析（一）][Vue2.0_ - _keep-alive]中已经对keep-alive源码的整体框架了做了一个简单的梳理，知道了keep-alive工作的一个大体流程，今天我们我将继续对keep-alive一些核心的源码进行展开分析。

### cacheVNode ###

> 上篇文章中提到了在methods中定义了一个cacheVNode函数，用来做虚拟DOM的缓存，下面就来分析一下它的源码：

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)
    			if(this.max && keys.length > parseInt(this.max)){ 
    				pruneCacheEntry(cache, keys[0], keys, this._vnode)
    			}
    			this.vnodeToCache = null;
    		}
    	}
    }

>  *  首先获取实例上的四个属性cache, keys, vnodeToCache, keyToCache
>     
>      *  前两个属性已经在上一篇文章中有说明，这里不再赘述
>      *  vnodeToCache需要被缓存的虚拟dom
>      *  keyToCache需要被缓存的虚拟dom对应的key
>  *  如果vnodeToCache不为空则说明需要被缓存，结构出vnodeToCache的详细信息，并保存在以keyToCache为键的对象cache中
>  *  同时将键keyToCache保存在keys列表中
>  *  判断是否设置了缓存最大值，如果设置了并且缓存列表的长度已经超过了最大值，则执行pruneCacheEntry函数对缓存列表进行修剪，注意这里是将最早缓存的组件进行删除。
>  *  最后将vnodeToCache 清空

### getComponentName ###

> 组件的公共函数，用于获取组件的名称

function getComponentName(opts: ?VNodeComponentOptions): ?string { 
    	return opts && (opts.Ctor.options.name || opts.tag);
    }

### pruneCacheEntry ###

> 组件的公共函数

function pruneCacheEntry (
      cache: VNodeCache, key: string, keys: Array<string>, current?: VNode
    ) { 
      const cached = cache[key]
      // cached 有值，并且 不是当前正在渲染的 组件
      if (cached && (!current || cached.tag !== current.tag)) { 
        cached.componentInstance.$destroy()
      }
      cache[key] = null
      remove(keys, key)
    }

>  *  从cache对象中获取到要被销毁的组件实例
>  *  如果存在并且不是当前正在渲染的组，则直接销毁
>  *  同时从cache对象中移除虚拟dom实例
>  *  从keys列表中移除对应的key

### render ###

render () { 
        const slot = this.$slots.default
        //获取kepp-alive组件下的第一个子组件vndoe
        const vnode: VNode = getFirstComponentChild(slot)
        const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
        if (componentOptions) { 
          // 获取组件名称
          const name: ?string = getComponentName(componentOptions)
          const {  include, exclude } = this;
          //判断是否是需要缓存、不需要直接走这if
          if (
            // 有include和没有获取到name值 或者 include是否包含name值
            (include && (!name || !matches(include, name))) ||
            // 是否是白名单、直接过滤
            (exclude && name && matches(exclude, name))
          ) { 
            return vnode
          }
          //需要缓存逻辑
          const {  cache, keys } = this
          //判断是否有key、如果没有vue会自动给他加上key
          const key: ?string = vnode.key == null
            ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${ componentOptions.tag}` : '')
            : vnode.key
          //当前是否已经有缓存下来的组件数据、有直接取缓存的
          if (cache[key]) { 
              //赋值缓存的vnode
            vnode.componentInstance = cache[key].componentInstance
            // make current key freshest
            remove(keys, key)
            keys.push(key)
          } else { 
    	    // delay setting the cache until update
        	this.vnodeToCache = vnode
           	this.keyToCache = key
          }
          //添加keepAlive = true标记
          vnode.data.keepAlive = true
        }
        return vnode || (slot && slot[0])
      }

>  *  拿到keep-alive组件中的默认插槽，并根据插槽内容获取到keep-alive的第一个组件。前面的文章也提到过，即便是由多个子组件，默认也只有第一个是有效的。
>  *  获取到子组件的名字name，并根据keep-alive的include和exclude去判断当前子组件是否被缓存，出现以下两种情况则不走缓存，直接将vnode返回
>     
>      *  include：如果include属性存在，并且name不包含在include中
>      *  exclude：如果include属性存在，并且那么包含在exc中
>  *  如果都不符合上述两种条件，则说明需要走缓存逻辑并从当前keep-alive实例中取出缓存对象cache和对应的键列表keys
>  *  取出vnode的key，如果key不存在则重新生成一个
>  *  根据key到cache对象中判断要被渲染的子组件是否被缓存
>     
>      *  如果cache对象中存在该子组件的缓存，则直接取出缓存对象的componentInstance（子组件实例）并赋值给vnode的componentInstance；同时将key从keys列表中移除并重新添加（为了保证当前key是最新的）
>      *  如果子组件没有被缓存，则把vnode和key分别赋值给keep-alive实例的vnodeToCache和keyToCache两个属性中，等待下次更新时进行缓存
>  *  最后设置keepAlive属性为true，并将当前vnode返回渲染。

### 总结 ###

> 关于keep-alive的原理分析到这里就结束了。简单的总结下：就是在使用keep-alive时，会根据include和exclude两个属性来判断，keep-alive内部的子组件是否满足匹配条件，如果满足则把子组件对应的虚拟dom的实例利用cache和keys两个属性进行缓存。当下次子组件被重新渲染时首先判断缓存列表中是否存在，如果存在则直接从缓存中拉取，否则暂存在待缓存对象中待下次更新时缓存。  
> 喜欢的小伙伴欢迎点赞留言加关注哦！

[Vue2.0_ - _keep-alive]: https://blog.csdn.net/lixiaosenlin/article/details/120759063