来看一下Vue中实现钩子函数部分的源码

// ...
export function lifecycleMixin (Vue: Class<Component>) {
  Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    if (vm._isMounted) {
      callHook(vm, 'beforeUpdate') // callHook来调用钩子函数
    }
// ...

export function callHook (vm: Component, hook: string) {
  const handlers = vm.$options[hook]
  if (handlers) {
    for (let i = 0, j = handlers.length; i < j; i++) {
      try {
        handlers[i].call(vm) // 以组件实例来作为钩子函数中this的指向
      } catch (e) {
        handleError(e, vm, `${hook} hook`)
      }
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit('hook:' + hook)
  }
}

我们可以看到处理流程就是在生命周期流程中相应流程执行后,执行callHook()。而callHook的作用便是执行我们自定义的钩子函数,并将钩子中this的指向指为当前组件实例(通过Function.prototype.call)

Logo

前往低代码交流专区

更多推荐