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 }