组件的 keep-alive 简介

Posted 2020-10-11 you1you

本篇文章，我们来讲一下keep-alive的实现。

Vue中，有三个内置的抽象组件，分别是keep-alive、transition和transition-group，

它们都有一个共同的特点，就是自身不会渲染一个DOM元素，也不会出现在父组件链中。

 

keep-alive的作用，是包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。具体的用法见这里。

 

该组件的定义，是在src/core/components/keep-alive.js文件中。

它会在Vue初始化时，添加在Vue.options.components上，所以在所有的组件中，都可以直接只用它。

 

直接看代码：

export default {
  name: ‘keep-alive‘,
  abstract: true,

  props: {
    ...
  },

  created () {
    this.cache = Object.create(null)
  },

  destroyed () {
   ...
  },

  watch: {
    ...
  },

  render () {
    ...
  }
}

 

name不用多说，abstract: true 这个条件我们自己定义组件时通常不会用，

它是用来标识当前的组件是一个抽象组件，它自身不会渲染一个真实的DOM元素。

比如在创建两个vm实例之间的父子关系时，会跳过抽象组件的实例:

 

  let parent = options.parent

  if (parent && !options.abstract) {
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }

props表示我们可以传入include来匹配哪些组件可以缓存，exclude来匹配哪些组件不缓存。

created钩子函数调用时，会创建一个this.cache对象用于缓存它的子组件。

destroyed表示keep-alive被销毁时，会同时销毁它缓存的组件，并调用deactivated钩子函数。

 

function pruneCacheEntry (vnode: ?VNode) {
  if (vnode) {
    if (!vnode.componentInstance._inactive) {
      callHook(vnode.componentInstance, ‘deactivated‘)
    }
    vnode.componentInstance.$destroy()
  }
}

watch是在我们改变props传入的值时，同时对this.cache缓存中的数据进行处理。

function pruneCache (cache: VNodeCache, filter: Function) {
  for (const key in cache) {
    const cachedNode: ?VNode = cache[key]
    if (cachedNode) {
      const name: ?string = getComponentName(cachedNode.componentOptions)
      if (name && !filter(name)) {
        pruneCacheEntry(cachedNode)
        cache[key] = null
      }
    }
  }
}

抽象组件没有实际的DOM元素，所以也就没有template模板，它会有一个render函数，我们就来看看里面进行了哪些操作。

  render () {
    const vnode: VNode = getFirstComponentChild(this.$slots.default)
    const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
    if (componentOptions) {
      // check pattern
      const name: ?string = getComponentName(componentOptions)
      if (name && (
        (this.include && !matches(this.include, name)) ||
        (this.exclude && matches(this.exclude, name))
      )) {
        return vnode
      }
      const key: ?string = 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 (this.cache[key]) {
        vnode.componentInstance = this.cache[key].componentInstance
      } else {
        this.cache[key] = vnode
      }
      vnode.data.keepAlive = true
    }
    return vnode
  }

首先，调用getFirstComponentChild方法，来获取this.$slots.default中的第一个元素。

export function getFirstComponentChild (children: ?Array<VNode>): ?VNode {
  return children && children.filter((c: VNode) => c && c.componentOptions)[0]
}

this.$slots.default中包含的是什么内容，我们在《slot和作用域插槽》中已经详细的做了讲解。

从上面的方法我们可以看到，在我们会过滤掉非自定义的标签，然后获取第一个自定义标签所对应的vnode。

所以，如果keep-alive里面包裹的是html标签，是不会渲染的。

 

然后获取componentOptions，

vdom——VNode中我们介绍过componentOptions包含五个元素

{ Ctor, propsData, listeners, tag, children }。

 

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

通过getComponentName方法来获取组件名，然后判断该组件是否合法，

如果include不匹配或exclude匹配，则说明该组件不需要缓存，

此时直接返回该vnode。

 

否则，vnode.key不存在则生成一个，存在则就用vnode.key作为key。

然后把该vnode添加到this.cache中，并设置vnode.data.keepAlive = true。

最终返回该vnode。

 

以上只是render函数执行的过程，keep-alive本身也是一个组件，

在render函数调用生成vnode后，同样会走__patch__。在创建和diff的过程中，

也会调用init、prepatch、insert和destroy钩子函数。

 

不过，每个钩子函数中所做的处理，和普通组件有所不同。

 

  init (
    vnode: VNodeWithData,
    hydrating: boolean,
    parentElm: ?Node,
    refElm: ?Node
  ): ?boolean {

    if (!vnode.componentInstance || vnode.componentInstance._isDestroyed) {
      const child = vnode.componentInstance = createComponentInstanceForVnode(
        vnode,
        activeInstance,
        parentElm,
        refElm
      )
      child.$mount(hydrating ? vnode.elm : undefined, hydrating)

    } else if (vnode.data.keepAlive) {
      // kept-alive components, treat as a patch
      const mountedNode: any = vnode // work around flow
      componentVNodeHooks.prepatch(mountedNode, mountedNode)
    }
  },

在keep-alive组件内调用__patch__时，如果render返回的vnode是第一次使用，

则走正常的创建流程，如果之前创建过且添加了vnode.data.keepAlive，

则直接调用prepatch方法，且传入的新旧vnode相同。

 

  prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
    const options = vnode.componentOptions
    const child = vnode.componentInstance = oldVnode.componentInstance
    updateChildComponent(
      child,
      options.propsData, // updated props
      options.listeners, // updated listeners
      vnode, // new parent vnode
      options.children // new children
    )
  },

prepatch函数做了哪些工作，之前也详细的介绍过，这里就不多说了。

简单的总结，就是依据新vnode中的数据，更新组件内容。

 

  insert (vnode: MountedComponentVNode) {
    if (!vnode.componentInstance._isMounted) {
      vnode.componentInstance._isMounted = true
      callHook(vnode.componentInstance, ‘mounted‘)
    }
    if (vnode.data.keepAlive) {
      activateChildComponent(vnode.componentInstance, true /* direct */)
    }
  },

在组件插入到页面后，如果是vnode.data.keepAlive则会调用activateChildComponent，

这里面主要是调用子组件的activated钩子函数，并设置vm._inactive的标识状态。

 

  destroy (vnode: MountedComponentVNode) {
    if (!vnode.componentInstance._isDestroyed) {
      if (!vnode.data.keepAlive) {
        vnode.componentInstance.$destroy()
      } else {
        deactivateChildComponent(vnode.componentInstance, true /* direct */)
      }
    }
  }

在组件销毁时，如果是vnode.data.keepAlive返回true，

则只调用deactivateChildComponent，这里面主要是调用子组件的deactivated钩子函数，

并设置vm._directInactive的标识状态。因为vnode.data.keepAlive为true的组件，

 

是会被keep-alive缓存起来的，所以不会直接调用它的$destroy()方法，

上面我们也提到了，当keep-alive组件被销毁时，会触发它缓存中所有组件的$destroy()。

因为keep-alive包裹的组件状态变化，还会触发其子组件的activated或deactivated钩子函数，

 

activateChildComponent和deactivateChildComponent也会做一些这方面的处理，细节大家可以自行查看。