组件内使用hookEvent

mounted() {
  // 创建一个定时器
    this.timer = setInterval(() => {
      // ......
    }, 500);
  },
  // 销毁这个定时器。
beforeDestroy() {
  if (this.timer) {
  clearInterval(this.timer);
  this.timer = null;
  }
}

而借助hook,我们可以这样写，更方便维护：

mounted() {
    let timer = setInterval(() => {
      // ......
    }, 500);
    this.$once("hook:beforeDestroy", function() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    });
  }

监听子组件声明声明周期：

原本

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

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

hooks：

//父组件
<child
  :value="value"
  @hook:mounted="onChildMounted"
/>
method () {
  onChildMounted() {
  // do something...
  }
},

在Vue组件中，可以用过 on和once去监听所有的生命周期钩子函数，如监听组件的 updated 钩子函数可以写成 this.$$on(‘hook:updated’, () => {})