Vue @hook

使用
之前我们在Vue使用定时器的时候，在创建定时器的时候，当页面不存在的时候需要销毁定时器。我们一般会这样使用

<script>
  export default {
    mounted() {
      this.timer = setInterval(() => { ... }, 1000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }
  };
</script>

但是还有更好的方式处理。这其实是我们在组件初始化的时候，挂载了beforeDestroy钩子。钩子的使用方式为
$emit(hook+声明周期)，其实在源码中也是可以看到的，当我们创建一个自定义钩子的时候，也会对系统钩子和自定义钩子进行合并

<script>
  export default {
    mounted() {
      const timer = setInterval(() => { ... }, 1000);
      this.$once('hook:beforeDestroy', () => clearInterval(timer);)
    }
  };
</script>

介绍

hook可以让我们在一个声明周期中监听其他生命周期的方法，一些情况下可以简化代码和优化代码的效果。比如多个声明周期比较简单，这个时候就可以考虑把这些代码放到create,mount中。
当一个组件内的生命周期函数在执行结束后 $emit自定事件，不仅可以在组件中被$ on，Vue的语法也觉得这些事件可以被父组件v-on到。比如我们希望父组件监听到子组件mount,beforeUpdate等生命周期，那么可以使用如下实例

<v-chart
    @hook:mounted="loading = false"
    @hook:beforeUpdated="loading = true"
    @hook:updated="loading = false"
    :data="data"
/>

这样就实现了对子组件生命周期的监听。对第三方组件也是有效的

Vue @hook

介绍

推荐阅读更多精彩内容