vue中@hook使用技巧---监听本组件或子组件的生命周期

1、在同一个组件中，监听生命周期

vue 文档在 程序化的事件侦听器 一节中讲了怎么注册/停止一个监听事件。
简单语法如下：

this.$on/$once('hook:生命周期'，callback)    

vue组件的任意一个生命周期都可以被监听
除了官方文档中的例子，我们最常用到的是定时器的使用与销毁。

export default{
  data(){
    timer:null  
  },
  mounted(){
      this.timer = setInterval(()=>{
      //具体执行内容
      console.log('1');
    },1000);
  }
  beforeDestory(){
    clearInterval(this.timer);
    this.timer = null;
  }
}

这种方法存在的问题是：
1、vue实例中需要有这个定时器的实例，感觉有点多余;
2、 创建的定时器代码和销毁定时器的代码没有放在一起，不容易维护，通常很容易忘记去清理这个定时器;

怎么避免这个问题呢?
可以用 hook来监听 beforeDestory 生命周期。因为只要监听一次就够了，所以用$once来注册监听。

export default{
  methods:{
    fn(){
      const timer = setInterval(()=>{
        console.log('1');
      },1000);
      this.$once('hook:beforeDestory',()=>{
        clearInterval(timer);
        timer = null;
      })
    }
  }
}

通过 $on(eventName, eventHandler) 侦听一个事件
通过 $once(eventName,eventHandler) 一次性侦听一个事件
通过 $off(eventName, eventHandler) 停止侦听一个事件

2、在父组件监听子组件的生命周期方法

父组件如何在子组件的mounted生命周期里做某些处理？
方式一，首先想到的是不是在子组件 mounted周期中 emit 父组件传递给子组件自定义的事件

//父组件
<rl-child  :value="40"  @childMounted="childMountedHandle" />
method () {
  childMountedHandle() {
     // do something...
  }
},

// 子组件
mounted () {
  this.$emit('childMounted')
},

方式二，hook

//父组件
<rl-child  :value="40"  @hook:mounted="childMountedHandle"  />
method () {
  childMountedHandle() {
       // 子组件触发mounted,父组件就触发这个事件
  }
},

//子组件，什么也不需要操作

这里只能是mounted吗，不，子组件中的任意一个生命周期都可以被监听到，created、beforeUpdate、updated、beforeDestroy、destoroyed 。。。。。。

参考链接：https://www.jianshu.com/p/467ca78cbe71