vue hook 使用

用途一：在同一个组件中

vue 文档在 程序化的事件侦听器 一节中讲了怎么注册/停止一个监听事件。
如何监听实例的某个生命周期，并执行相应的操作？简单语法如下：

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

除了文档中的例子，我们最常用到的是定时器的使用与销毁。

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;
      })
    }
  }
}

关于事件监听还需注意一点，引用文档上的原话：

注意 Vue 的事件系统不同于浏览器的 EventTarget API。尽管它们工作起来是相似的，但是 $emit、$on, 和 $off并不是 dispatchEvent、addEventListener 和 removeEventListener 的别名。

用途二：在父组件监听子组件的生命周期方法

如果问：父组件如何在子组件的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() {
  // do something...
  }
},