Vue源码分析之keep-alive（三）

这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战

前言

官方文档提到当缓存组件在<keep-alive>内被切换时，它的created和mounted生命周期不会被调用，前边的文章也看了为什么被keep-alive缓存过的组件不会去调用created，mounted等钩子函数。

但是我们日常的业务场景都是需要缓存组件再次被渲染的时候重新去请求接口更新数据等，没有mounted这些钩子函数，那我们怎么去处理呢？？

官方为我们提供了另外两个钩子：activated和deactivated

activated：被keep-alive缓存的组件激活时调用（服务端渲染不调用）
deactivated：被keep-alive缓存的组件失活时调用（服务端渲染不调用）

这篇文就来看下这两个钩子的触发过程：

activated钩子

其实patch函数在执行完新老节点对比更新后，在最后一步执行了一个invokeInsertHook函数。

看这个函数的命名就知道与钩子有关，看一下具体做了啥：

invokeInsertHook

function invokeInsertHook (vnode, queue, initial) {
  // delay insert hooks for component root nodes, invoke them after the
  // element is really inserted
  if (isTrue(initial) && isDef(vnode.parent)) {
    vnode.parent.data.pendingInsert = queue
  } else {
    for (let i = 0; i < queue.length; ++i) {
      queue[i].data.hook.insert(queue[i])
    }
  }
}

invokeInsertHook函数内部调用了组件Vnode的insert钩子，insert函数定义在src/core/vdom/create-component.js中

insert

insert (vnode: MountedComponentVNode) {
  const { context, componentInstance } = vnode
  if (!componentInstance._isMounted) {
    componentInstance._isMounted = true
    callHook(componentInstance, 'mounted')
  }
  if (vnode.data.keepAlive) {
    if (context._isMounted) {
      // 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 */)
    }
  }
}

对于缓存组件来说vnode.data.keepAlive是true，当组件已经mounted过则执行queueActivatedComponent，否则执行activateChildComponent。

queueActivatedComponent

看到这个queueActivatedComponent是不是特别眼熟，哈哈哈，因为在看Watcher队列的时候见过，这里简单看下。它定义在src/core/observer/scheduler.js

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
  activatedChildren.push(vm)

将当前vm实例加入到activatedChildren数组中，在下一个Tick执行flushSchedulerQueue时会调用callActivatedHooks，其内部还是调用了activatedChildComponent。

所以缓存组件最后都会执行activatedChildComponent，只是如果组件已经mounted，会延后去执行。

function flushSchedulerQueue () {
  ...
  
  // call component updated and activated hooks
  callActivatedHooks(activatedQueue)
  callUpdatedHooks(updatedQueue)
}

function callActivatedHooks (queue) {
  for (let i = 0; i < queue.length; i++) {
    queue[i]._inactive = true
    activateChildComponent(queue[i], true /* true */)
  }
}

接下来看下activatedChildComponent具体做了什么？？

activateChildComponent

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

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
    for (let i = 0; i < vm.$children.length; i++) {
      activateChildComponent(vm.$children[i])
    }
    callHook(vm, 'activated')
  }
}

这里就是activated钩子的执行时机，会递归去执行所有子组件的activated钩子。

deactivated钩子

既然文档说deactivated钩子是在组件失活时调用，可以猜到是在destroy中。定义在src/core/vdom/create-component.js

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

如果组件Vnode不是缓存组件则直接调用$destroy方法
如果是缓存组件则调用deactivateChildComponent方法

deactivateChildComponent

deactivateChildComponent定义在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
    for (let i = 0; i < vm.$children.length; i++) {
      deactivateChildComponent(vm.$children[i])
    }
    callHook(vm, 'deactivated')
  }
}

写法与activated钩子类似，都是递归去调用所有子组件的deactivated钩子。

后记

Vue在执行渲染的patch函数中最后一步会执行invokeInsertHook函数，对于缓存组件，就是这个时机去触发activated钩子的。

具体的钩子函数实现后边专门细看~