认识

2023年06月10日

柏拉文

越努力，越幸运

一、认识

---

Hook Event 是 Vue 的自定义事件结合生命周期钩子实现的一种从组件外部为组件注入额外生命周期方法的功能。

<template>
  <div class="wrapper">
    <comp @hook:mounted="hookMounted" />
  </div>
</template>

<script>
// 这就是上面的那个第三方业务组件
import Comp from '@/components/Comp.vue'

export default {
  components: {
    Comp
  },
  methods: {
    hookMounted() {
      console.log('loading ...')
    }
  }
}
</script>

Hook Event 实现过程如下:

1. 处理组件自定义事件的时候（vm.$on) 如果发现组件有 hook:xx 格式的事件（xx 为 Vue 的生命周期函数），则将 vm._hasHookEvent 置为 true，表示该组件有 Hook Event

2. 在组件生命周期方法被触发的时候，内部会通过 callHook 方法来执行这些生命周期函数，在生命周期函数执行之后，如果发现 vm._hasHookEvent 为 true，则表示当前组件有 Hook Event，通过 vm.$emit('hook:xx') 触发 Hook Event的执行

二、细节

---