从 vue 源码看问题 — 你知道 Hook Event 吗？

前言

在之前的几篇文章中，都有提到 vue 中调用生命周期钩子时是通过 callHook() 方法进行调用的，比如在初始化篇章中调用 beforeCreate 和 created 生命周期钩子方式如下:

那么接下来一起来了解下到底什么是 Hook Event ？

Hook Event

是什么？

Hook Event 在 vue 的官方文档中并没有提及到，这也是很多人很少或者几乎没有使用到 Event Hook 的主要原因，但这不代表不可以使用.

Vue 中提供了对应的生命周期钩子，方便开发者在特定的时间节点进行对应的逻辑处理，比如：在组件的 mounted 生命周期钩子中，准备组件渲染所需要的数据.

而 Hook Event 是通过 Vue 中 自定义事件 + 生命周期钩子 的方式，实现从组件外部为组件注入额外生命周期方法的功能.

怎么用？

这里直接通过一个简单的例子来快速了解 Hook Event 的使用.

首先通过 Vue.component() 注册了 ListView 主要用于列表渲染，在其 mounted 生命周期钩子中通过 setTimeout() 模仿接口请求，并在模板中进行使用 <list-view @hook:mounted="mountedAction"></list-view>，接着通过 @hook:mounted="mountedAction" 向列表组件组件中注入了外部定义的 mounted 钩子中需要执行的事件，此时控制台上的输出结果为：

这就证明了 Hook Event 就是通过 自定义事件 + 生命周期钩子 的方式，实现从组件外部为组件注入额外生命周期方法.

具体代码如下：

    // HTML 模板<div id="app"><list-view @hook:mounted="mountedAction"></list-view></div>// JS 逻辑 <script>// 第三方 vue 组件Vue.component('ListView', {template:`<ul class="list-view"><li v-for="item in list">{{ item }}</li></ul>`,data(){return {list: []}},mounted(){console.log("mounted in ListView...");setTimeout(()=>{this.list = [1,2,3,4,5,6];},1000);}});new Vue({el: '#app',methods:{mountedAction(){console.log("mountedAction from parent...");}}});</script>

callHook() 方法

文件位置：src\core\instance\lifecycle.js

callHook 中通过 vm._hasHookEvent 标识判断是否存在 Hook Event，而这个标识是在 Vue.prototype.$on 实例方法中进行定义的，详情可看 eventsMixin(Vue) 方法.

export function callHook (vm: Component, hook: string) {// #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++) {// 通过 apply 或 call 的方式调用生命周期函数invokeWithErrorHandling(handlers[i], vm, null, vm, info)}}// 如果有 HookEvent 事件传入，则通过 $emit 调用这个事件，如 hook:mountedif (vm._hasHookEvent) {// 本质就是执行 vm._events['hook:mounted'] 数组中的所有处理函数vm.$emit('hook:' + hook)}// 调用完成后关闭依赖收集popTarget()
}

invokeWithErrorHandling() 方法

文件位置：src\core\util\error.js

/*1. 使用 try catch 包裹生命周期钩子中的逻辑，便于进行异常捕获2. 调用生命周钩子：有 args 参数通过 apply 调用，否则通过 call 调用3. 返回调用结果
*/
export function invokeWithErrorHandling (handler: Function,context: any,args: null | any[],vm: any,info: string
) {let restry {res = args ? handler.apply(context, args) : handler.call(context)if (res && !res._isVue && isPromise(res) && !res._handled) {res.catch(e => handleError(e, vm, info + ` (Promise/async)`))// issue #9511// 避免在嵌套调用时多次触发 catchres._handled = true}} catch (e) {// 异常处理handleError(e, vm, info)}return res
}

总结

Hook Event 原理是什么？

首先 Hook Event 的作用实现从组件外部为组件注入额外生命周期方法的功能，主要是通过 自定义事件 + 生命周期钩子 的方式实现的.

• vue 在处理组件如 <comp @hook:lifecycle="customMethod" /> 时，会将这个事件通过 vm.$on() 即 Vue.prototype.$on() 方法进行监听处理，并且遇到格式为 hook:xx 的事件时，会将 vm._hasHookEvent 置为 true，表示该组件有 Hook Event
• 在通过 callHook() 方法调用生命周期钩子时，会以循环的方式执行组件上对应的生命周期钩子
• 在执行完后组件上的生命周期钩子后，会通过 vm._hasHookEvent 标识判断当前组件是否存在 Hook Event，如果存在就通过 vm.$emit('hook:xxx') 即 Vue.prototype.$emit() 方法调用 vm._events['hook:xxx'] 事件上的所有处理函数