hook 的使用

vue源码中,组件调用了$on监听的事件名符合以hook:开头,当前实例的vm._hasHookEvent会为true,然后如果vm._hasHookEvent为true,组件就会在对应生命周期的时候通过emit触发对应的事件vm.$emit('hook:' + hook)

内部监听生命周期函数

实例：在使用Echarts时会监听当前窗口的变化从而对当前的图表resize

created() {
   // 监听窗口发生变化，resize组件
    window.addEventListener('resize', this.handleResizeChart)
},
beforeDestroy() {
  // 组件销毁时，销毁监听事件
  window.removeEventListener('resize', this.handleResizeChart)
}

更好的写法时将监听resize事件与销毁resize事件放到一起，使得代码逻辑更加紧凑，防止遗漏：

created() {
      // 监听窗口发生变化，resize组件
      window.addEventListener('resize', this.handleResizeChart);
      // 通过hook监听组件销毁钩子函数，并取消监听事件，$on或$once
      this.$once('hook:beforeDestroy', () => {
            window.removeEventListener('resize', this.handleResizeChart)
      });
},

外部监听生命周期函数->父组件监听子组件生命周期

一般的做法,通过$emit来通知父组件

父组件

.component-wrap
    Child(@mounted="handleMounted")

子组件

... ...
mounted () {
    this.$emit('mounted');
}
... ...

这种方法能解决大部分问题，但有些繁琐，且面对第三方组件时，这种实现方法就不好用了。
更好的实现方法是通过使用 @hook: 前缀监听生命周期中的钩子，并指定回调函数。例如：

.component-wrap
    Child(@hook:mounted="handleMounted")