keep-alive

为了组件的缓存优化而使用 组件

内置组件

定义在src/core/components/keep-alive.js中

export default { // 一个对象
  name: 'keep-alive',
  abstract: true, // 抽象组件
  props: {
    // 字符串或者表达式
    include: patternTypes, // 只有匹配的组件会被缓存
    exclude: patternTypes, // 任何匹配的组件都不会被缓存
    max: [String, Number] // 缓存的大小
    // 缓存的是vnode对象，也会缓存DOM，当缓存很多时会比较占用内存，所以max允许配置指定缓存大小
  },
  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
      }
    }
  },
  created () {
    // 缓存已经创建过的vnode
    this.cache = Object.create(null)
    this.keys = []
  },
  destroyed () {
    for (const key in this.cache) {
      pruneCacheEntry(this.cache, key, this.keys)
    }
  },
  mounted () {
    this.cacheVNode()
    this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
    })
  },
  updated () {
    this.cacheVNode()
  },
  // 实现了render函数来执行组件渲染
  render () {
    // 获取第一个元素的vnode
    // 在<keep-alive>内部写DOM，可以先获取到它的默认插槽，然后在获取到它的第一个子节点
    // <keep-alive>只处理第一个子元素，所以一般和它搭配使用的有component动态组件或者是router-view
    const slot = this.$slots.default
    const vnode: VNode = getFirstComponentChild(slot)
    const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
    if (componentOptions) {
      // check pattern
      // 判断当前组件的名称和include、exclude的关系
      const name: ?string = getComponentName(componentOptions)
      const { include, exclude } = this
      // 传的include和exclude可以是数组、字符串、正则表达式三种中任意一种
      // 如果组件名满足了配置include且不匹配或者是配置了exclude且匹配就直接返回这个组件的vnode，否则走下一步缓存
      if (
        // not included
        (include && (!name || !matches(include, name))) ||
        // excluded
        (exclude && name && matches(exclude, name))
      ) {
        return vnode
      }
      const { cache, keys } = this
      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
      // 命中缓存-直接从缓存中拿vnode的组件实例，并且重新调整key的顺序放在最后一个
      if (cache[key]) {
        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
      }
      vnode.data.keepAlive = true
    }
    return vnode || (slot && slot[0])
  }
}
// 做匹配
function matches (pattern: string | RegExp | Array<string>, name: string): boolean {
  if (Array.isArray(pattern)) { // 处理数组
    return pattern.indexOf(name) > -1
  } else if (typeof pattern === 'string') { // 处理字符串
    return pattern.split(',').indexOf(name) > -1
  } else if (isRegExp(pattern)) { // 处理正则表达式
    return pattern.test(name)
  }
  /* istanbul ignore next */
  return false
}
// 缓存vnode
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
    // 配置了max，并且缓存的长度超过了this.max，还要从缓存中删除第一个
    if (this.max && keys.length > parseInt(this.max)) {
      pruneCacheEntry(cache, keys[0], keys, this._vnode)
    }
    this.vnodeToCache = null
  }
}
// 删除缓存入口
function pruneCacheEntry (
  cache: CacheEntryMap,
  key: string,
  keys: Array<string>,
  current?: VNode
) {
  const entry: ?CacheEntry = cache[key]
  // 如果要删除的缓存的组件tag不是当前渲染组件tag
  if (entry && (!current || entry.tag !== current.tag)) {
    // 执行删除缓存的组件实例的$destroy方法
    entry.componentInstance.$destroy()
  }
  cache[key] = null
  remove(keys, key)
}

在组件实例建立父子关系的时候会被忽略，发生在 initLifecycle 的过程中

// locate first non-abstract parent
var parent = options.parent;
if (parent && !options.abstract) {
  while (parent.$options.abstract && parent.$parent) {
    parent = parent.$parent;
  }
  parent.$children.push(vm);
}
vm.$parent = parent;

注意， 组件也是为观测 include 和 exclude 的变化，对缓存做处理

// 观测变化执行pruneCache函数
this.$watch('include', val => {
  pruneCache(this, name => matches(val, name))
})
this.$watch('exclude', val => {
  pruneCache(this, name => !matches(val, name))
})
function pruneCache (keepAliveInstance: any, filter: Function) {
  const { cache, keys, _vnode } = keepAliveInstance
  // 对cache做遍历
  for (const key in cache) {
    const entry: ?CacheEntry = cache[key]
    // 发现缓存的节点名称和新的规则没有匹配上时
    if (entry) {
      const name: ?string = entry.name
      if (name && !filter(name)) {
        // 把这个缓存节点从缓存中摘除
        pruneCacheEntry(cache, key, keys, _vnode)
      }
    }
  }
}

组件渲染

了解了 的组件实现，但并不知道它包裹的子组件渲染和普通组件有什么不一样

例子

let A = {
  template: '<div class="a">' +
  '<p>A Comp</p>' +
  '</div>',
  name: 'A'
}
let B = {
  template: '<div class="b">' +
  '<p>B Comp</p>' +
  '</div>',
  name: 'B'
}
let vm = new Vue({
  el: '#app',
  template: '<div>' +
  '<keep-alive>' +
  '<component :is="currentComp">' +
  '</component>' +
  '</keep-alive>' +
  '<button @click="change">switch</button>' +
  '</div>',
  data: {
    currentComp: 'A'
  },
  methods: {
    change() {
      this.currentComp = this.currentComp === 'A' ? 'B' : 'A'
    }
  },
  components: {
    A,
    B
  }
})

首次渲染

Vue 的渲染最后都会到 patch 过程，而组件的 patch 过程会执行 createComponent 方法，它的定义在 src/core/vdom/patch.js 中

function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
  let i = vnode.data
  if (isDef(i)) {
    // 第一次渲染时vnode.componentInstance为undefined和vnode.data.keepAlive为true
    // 因为它的父组件 <keep-alive> 的 render 函数会先执行，那么该 vnode 缓存到内存中，并且设置 vnode.data.keepAlive 为 true
    const isReactivated = isDef(vnode.componentInstance) && i.keepAlive // false
    // 走正常的init钩子函数执行组件的mount
    if (isDef(i = i.hook) && isDef(i = i.init)) {
      i(vnode, false /* hydrating */)
    }
    // after calling the init hook, if the vnode is a child component
    // it should've created a child instance and mounted it. the child
    // component also has set the placeholder vnode's elm.
    // in that case we can just return the element and be done.
    if (isDef(vnode.componentInstance)) {
      // 当vnode已经执行完patch后执行initComponent函数
      initComponent(vnode, insertedVnodeQueue)
      insert(parentElm, vnode.elm, refElm)
      if (isTrue(isReactivated)) {
        reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
      }
      return true
    }
  }
}

initComponent

function initComponent (vnode, insertedVnodeQueue) {
  if (isDef(vnode.data.pendingInsert)) {
    insertedVnodeQueue.push.apply(insertedVnodeQueue, vnode.data.pendingInsert)
    vnode.data.pendingInsert = null
  }
  // 缓存了vnode创建生成的DOM节点
  vnode.elm = vnode.componentInstance.$el
  if (isPatchable(vnode)) {
    invokeCreateHooks(vnode, insertedVnodeQueue)
    setScope(vnode)
  } else {
    // empty component root.
    // skip all element-related modules except for ref (#3455)
    registerRef(vnode)
    // make sure to invoke the insert hook
    insertedVnodeQueue.push(vnode)
  }
}

对于首次渲染而言，除了在 中建立缓存，和普通组件渲染没什么区别
对于例子，初始化渲染 A 组件以及第一次点击 switch 渲染 B 组件，都是首次渲染

缓存渲染

当从 B 组件再次点击 switch 切换到 A 组件，就会命中缓存渲染
当数据发送变化，在 patch 的过程中会执行 patchVnode 的逻辑，它会对比新旧 vnode 节点，甚至对比它们的子节点去做更新逻辑，但是对于组件 vnode 而言，是没有 children 的，那么对于 组件而言，如何更新它包裹的内容呢？
原来 patchVnode 在做各种 diff 之前，会先执行 prepatch 的钩子函数，
定义在 src/core/vdom/create-component 中

const componentVNodeHooks = {
  // ...
    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
    )
  },
  // ...
}

updateChildComponent定义在src/core/instance/lifecycle.js中

// 更新组件实例的一些属性
export function updateChildComponent (
  vm: Component,
  propsData: ?Object,
  listeners: ?Object,
  parentVnode: MountedComponentVNode,
  renderChildren: ?Array<VNode>
) {
  // ...
  // Any static slot children from the parent may have changed during parent's
  // update. Dynamic scoped slots may also have changed. In such cases, a forced
  // update is necessary to ensure correctness.
  const needsForceUpdate = !!(
    renderChildren ||               // has new static slots
    vm.$options._renderChildren ||  // has old static slots
    hasDynamicScopedSlot
  )
  // ...
  // resolve slots + force update if has children
  if (needsForceUpdate) {
    vm.$slots = resolveSlots(renderChildren, parentVnode.context)
    vm.$forceUpdate()
  }
  // ...
}

由于 组件本质上支持了 slot，所以它执行 prepatch 的时候，需要对自己的 children，也就是这些 slots 做重新解析，并触发 组件实例 $forceUpdate 逻辑，也就是重新执行 的 render 方法，这个时候如果它包裹的第一个组件 vnode 命中缓存，则直接返回缓存中的 vnode.componentInstance
在例子中就是缓存的 A 组件，接着又会执行 patch 过程，再次执行到 createComponent 方法

function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
  let i = vnode.data
  if (isDef(i)) {
    const isReactivated = isDef(vnode.componentInstance) && i.keepAlive // true
    if (isDef(i = i.hook) && isDef(i = i.init)) {
      i(vnode, false /* hydrating */)
    }
    // after calling the init hook, if the vnode is a child component
    // it should've created a child instance and mounted it. the child
    // component also has set the placeholder vnode's elm.
    // in that case we can just return the element and be done.
    if (isDef(vnode.componentInstance)) {
      initComponent(vnode, insertedVnodeQueue)
      insert(parentElm, vnode.elm, refElm)
      if (isTrue(isReactivated)) {
        reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
      }
      return true
    }
  }
}

在执行 init 钩子函数的时候不会再执行组件的mount过程了，相关逻辑在src/core/vdom/create-component.js中

const componentVNodeHooks = {
    init (vnode: VNodeWithData, hydrating: boolean): ?boolean {
    if (
      vnode.componentInstance &&
      !vnode.componentInstance._isDestroyed &&
      vnode.data.keepAlive
    ) {
      // kept-alive components, treat as a patch
      const mountedNode: any = vnode // work around flow
      componentVNodeHooks.prepatch(mountedNode, mountedNode)
    } else {
      const child = vnode.componentInstance = createComponentInstanceForVnode(
        vnode,
        activeInstance
      )
      child.$mount(hydrating ? vnode.elm : undefined, hydrating)
    }
  },
}

这也就是被 包裹的组件在有缓存的时候就不会在执行组件的 created、mounted 等钩子函数的原因
reactivateComponent

function reactivateComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
  let i
  // hack for #4339: a reactivated component with inner transition
  // does not trigger because the inner node's created hooks are not called
  // again. It's not ideal to involve module-specific logic in here but
  // there doesn't seem to be a better way to do it.
  // 解决对 reactived 组件 transition 动画不触发的问题
  let innerNode = vnode
  while (innerNode.componentInstance) {
    innerNode = innerNode.componentInstance._vnode
    if (isDef(i = innerNode.data) && isDef(i = i.transition)) {
      for (i = 0; i < cbs.activate.length; ++i) {
        cbs.activate[i](emptyNode, innerNode)
      }
      insertedVnodeQueue.push(innerNode)
      break
    }
  }
  // unlike a newly created component,
  // a reactivated keep-alive component doesn't insert itself
  // 把缓存的DOM对象直接插入到目标元素中，这样就完成了数据更新的情况下渲染的过程
  insert(parentElm, vnode.elm, refElm)
}

生命周期

组件一旦被 缓存，那么再次渲染的时候就不会执行 created、mounted 等钩子函数，但是很多业务场景都是希望被缓存的组件再次被渲染的时候做一些事情，好在 Vue 提供了 activated 钩子函数，它的执行时机是 包裹的组件渲染的时候
在渲染的最后一步，会执行 invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch) 函数执行 vnode 的 insert 钩子函数，它的定义在 src/core/vdom/create-component.js 中

const componentVNodeHooks = {
  // ...
    insert (vnode: MountedComponentVNode) {
    const { context, componentInstance } = vnode
    if (!componentInstance._isMounted) {
      componentInstance._isMounted = true
      callHook(componentInstance, 'mounted')
    }
    if (vnode.data.keepAlive) {
      if (context._isMounted) { // 判断被<keep-alive>包裹的组件已经mounted
        // vue-router#1212
        // During updates, a kept-alive component's child components may
        // change, so directly walking the tree here may call activated hooks
        // on incorrect children. Instead we push them into a queue which will
        // be processed after the whole patch process ended.
        queueActivatedComponent(componentInstance)
      } else {
        activateChildComponent(componentInstance, true /* direct */)
      }
    }
  },
  // ...
}

activateChildComponent

export function activateChildComponent (vm: Component, direct?: boolean) {
  if (direct) {
    vm._directInactive = false
    if (isInInactiveTree(vm)) {
      return
    }
  } else if (vm._directInactive) {
    return
  }
  if (vm._inactive || vm._inactive === null) {
    vm._inactive = false
    // 递归执行它的所有子组件的activated钩子函数
    for (let i = 0; i < vm.$children.length; i++) {
      activateChildComponent(vm.$children[i])
    }
    // 执行组件的activated钩子函数
    callHook(vm, 'activated')
  }
}

queueActivatedComponent定义在 src/core/observer/scheduler.js 中

/**
 * Queue a kept-alive component that was activated during patch.
 * The queue will be processed after the entire tree has been patched.
 */
export function queueActivatedComponent (vm: Component) {
  // setting _inactive to false here so that a render function can
  // rely on checking whether it's in an inactive tree (e.g. router-view)
  vm._inactive = false
  // 把当前vm实例添加到activatedChildren数组中，等所有的渲染完毕后在nextTick后会执行flushSchedulerQueue
  activatedChildren.push(vm)
}

flushSchedulerQueue

**
 * Flush both queues and run the watchers.
 */
function flushSchedulerQueue () {
  // ...
  // keep copies of post queues before resetting state
  const activatedQueue = activatedChildren.slice()
  const updatedQueue = queue.slice()
  resetSchedulerState()
  // call component updated and activated hooks
  // 遍历所有的activatedChildren
  callActivatedHooks(activatedQueue)
  // ...
}
function callActivatedHooks (queue) {
  // 执行activateChildComponent方法，通过队列的方式就是把整个activated时机延后了
  for (let i = 0; i < queue.length; i++) {
    queue[i]._inactive = true
    activateChildComponent(queue[i], true /* true */)
  }
}

有 activated 钩子函数，也就有对应的 deactivated 钩子函数，它是发生在 vnode 的 destory 钩子函数，定义在 src/core/vdom/create-component.js 中

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

对于 包裹的组件而言，它会执行 deactivateChildComponent(componentInstance, true) 方法，定义在 src/core/instance/lifecycle.js 中

export function deactivateChildComponent (vm: Component, direct?: boolean) {
  if (direct) {
    vm._directInactive = true
    if (isInInactiveTree(vm)) {
      return
    }
  }
  if (!vm._inactive) {
    vm._inactive = true
    // 递归执行它的所有子组件的deactivated钩子函数
    for (let i = 0; i < vm.$children.length; i++) {
      deactivateChildComponent(vm.$children[i])
    }
    // 执行组件的deactivated钩子函数
    callHook(vm, 'deactivated')
  }
}

组件是一个抽象组件，它的实现通过自定义 render 函数并且利用了插槽，并且知道了 缓存 vnode，了解组件包裹的子元素——也就是插槽是如何做更新的。且在 patch 过程中对于已缓存的组件不会执行 mounted，所以不会有一般的组件的生命周期函数但是又提供了 activated 和 deactivated 钩子函数
另外还知道了 的 props 除了 include 和 exclude 还有文档中没有提到的 max，它能控制缓存的个数