vue钩子函数的实现,基本原理就是callback

来源:互联网 发布:网络磁盘映射 编辑:程序博客网 时间:2024/06/05 23:56

来看一下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)

原创粉丝点击