hookEvent

[XZZ22]

是什么 可以通过模板声明式的注入声明周期钩子函数，也可以给第三方组件添加生命周期处理函数

使用场景 有一个来自第三方的复杂表格组件Table，表格进行数据更新的时候渲染时间需要1s，由于渲染时间较长，为了更好的用户体验，我希望在表格进行更新时显示一个loading动画。 粗暴的办法是直接修改这个组件的源码，利用beforeUpdate和updated来显示loading，不提倡

分析vue源码

vm._self = vm
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')

生命周期函数通过callHook调用

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++) {
            invokeWithErrorHandling(handlers[i], vm, null, vm, info)
        }
    }
    if (vm._hasHookEvent) {
        vm.$emit('hook:' + hook)
    }
    popTarget()
}

可以看出，只要使用类似 @hooks:lifecycle 这个形式，就可以从Vue的模板中声明式的注入一个生命周期函数

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