- 使用
之前我们在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中。
当一个组件内的生命周期函数在执行结束后on，Vue的语法也觉得这些事件可以被父组件v-on到。比如我们希望父组件监听到子组件mount,beforeUpdate等生命周期，那么可以使用如下实例
<v-chart
@hook:mounted="loading = false"
@hook:beforeUpdated="loading = true"
@hook:updated="loading = false"
:data="data"
/>
这样就实现了对子组件生命周期的监听。对第三方组件也是有效的
