Vue 中如何使用 @hook？

一、组件内使用

在 mounted 中添加一个监听，需要在 beforeDestroy 中移除这个监听（案例：vue 轮询），这是我们可以使用 hook。

mounted () {
  window.addEventListener('online', this.handleOnline)
  this.$once('hook:beforeDestroy', function () {
    window.removeEventListener('online', this.handleOnline)
  })
},

使用 this.$on/$once('hook:生命周期', callback) 就可以监听到生命周期的变化了。

二、父组件监听子组件的生命周期

父组件中如何监听子组件中的 mounted 方法（案例：vue 中 this.$refs.name.offsetHeight 获取不到值）。

//父组件中这样写
<rl-child
  @childMounted="handleChildMounted"
/>
// 子组件中这样写
mounted () {
  this.$emit('childMounted')
},

如果用 hook 的话，我们该如何使用呢？

//父组件中这样写
<rl-child
  @hook:mounted="handleChildMounted"
/> 
// 子组件中不用写东西
mounted () {},

直接使用 @hook 在父组件中监听子组件中的钩子函数，不需要在子组件中 $emit 一次。当然我们还可以监听 Vue 中的其他钩子函数，如 @hook:created，@hook:destroyed 等。

渲染骨架屏的时候，我们通过 @hook:mounted  来渲染子组件的同时，将其骨架屏进行隐藏。

<bank-partners v-if="showBankPartners" @hook:mounted="hideSkeleton('showBankPartnersSkeleton')" />
<!--骨架屏-->
<div class="skeleton-bg-w" v-if="showBankPartnersSkeleton">
  ......
</div>
hideSkeleton (param) {
  this[param] = false // 将对应的变量设为false
}