详解Vue源码学习之callHook钩子函数

概述

在学习 Vue 框架时，我们经常会接触到一些生命周期钩子函数，比如 created、mounted 等等。这些函数在组件生命周期中扮演着非常重要的角色。Vue 使用 callHook 函数来触发这些钩子函数，接下来我们就来详细讲解 callHook 函数的实现。

callHook 函数的实现

在 Vue 的源码中，callHook 函数定义在 src/core/instance/lifecycle.js 文件中，其定义如下：

export function callHook(vm, hook) {
  // #7573 disable dep collection when invoking lifecycle hooks
  pushTarget()
  const handlers = vm.$options[hook]
  const info = `${hook} hook`
  if (handlers) {
    for (let i = 0, j = handlers.length; i < j; i++) {
      invokeWithErrorHandling(handlers[i], vm, null, vm, info)
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit('hook:' + hook)
  }
  popTarget()
}

在调用 callHook 函数时，需要传入两个参数：vm 和 hook。其中，vm 是组件实例化对象，hook 是要触发的生命周期钩子函数名称。

callHook 函数首先通过 pushTarget 函数禁用了 computed watcher 的依赖收集，然后从 vm.$options 对象中取得要触发的钩子函数列表，使用 for 循环依次调用这些函数。在调用过程中，使用 invokeWithErrorHandling 函数进行错误处理。

钩子函数调用完毕后，如果组件实例对象上有 _hasHookEvent 属性，会触发 hook:${hook} 事件。

最后，通过 popTarget 函数恢复 computed watcher 的依赖收集。

实例说明

下面给出两条示例说明。

示例一

首先，在组件的 beforeCreate 钩子函数中添加一句 console 输出：

export default {
  beforeCreate () {
    console.log('beforeCreate hook')
  },
  // ...
}

然后，在组件初始化时，我们可以看到在控制台中输出了 'beforeCreate hook'，验证了 callHook 函数的正确性。

示例二

增加一个功能：组件销毁时，输出 log。首先通过 beforeDestroy 钩子函数添加销毁前提醒：

export default {
  beforeDestroy () {
    console.log(`${this.$options.name} component is about to be destroyed`)
  },
  // ...
}

接下来在销毁组件时，我们可以看到在控制台中输出了组件的名称，说明我们成功地添加了销毁前的提醒功能。

总结

调用 callHook 函数是 Vue 中触发生命钩子函数的核心流程，深入了解 callHook 函数的实现方式对我们处理生命周期钩子函数及其相关问题具有一定帮助。