在Vue当中，hooks可以作为一种event，在Vue的源码当中，称之为hookEvent。
在
Vue组件中，可以用过$on,$once去监听所有的生命周期钩子函数，如监听组件的updated钩子函数可以写成this.$on('hook:updated', () => {})
示例:使用hook之前
<template><div class="echarts"></div>
</template>
<script>
export default {mounted() {this.chart = echarts.init(this.$el)// 请求数据，赋值数据 等等一系列操作...// 监听窗口发生变化，resize组件window.addEventListener('resize', this.$_handleResizeChart)},updated() {// 干了一堆活},created() {// 干了一堆活},beforeDestroy() {// 组件销毁时，销毁监听事件window.removeEventListener('resize', this.$_handleResizeChart)},methods: {$_handleResizeChart() {this.chart.resize()},// 其他一堆方法}
}
</script>
使用hook之后,监听组件
export default {mounted() {this.chart = echarts.init(this.$el)// 请求数据，赋值数据 等等一系列操作...// 监听窗口发生变化，resize组件window.addEventListener('resize', this.$_handleResizeChart)// 通过hook监听组件销毁钩子函数，并取消监听事件this.$once('hook:beforeDestroy', () => {window.removeEventListener('resize', this.$_handleResizeChart)})},updated() {},created() {},methods: {$_handleResizeChart() {// this.chart.resize()}}
}
监听第三方组件数据的变化，但是组件又没有提供change事件，同事也没办法了，才想出来要去在外部监听组件的updated钩子函数。查看了一番资料，发现Vue支持在外部监听组件的生命周期钩子函数。
<template><!--通过@hook:updated监听组件的updated生命钩子函数--><!--组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发--><custom-select @hook:updated="$_handleSelectUpdated" />
</template>
<script>
import CustomSelect from '../components/custom-select'
export default {components: {CustomSelect},methods: {$_handleSelectUpdated() {console.log('custom-select组件的updated钩子函数被触发')}}
}
</script>