定时器
看到过一个 Vue 开发技巧，讲的是关于处理组件内定时器的步骤。
通常我们一般都是这样操作的：
<script>
export default {
data() {
return {
timer: null
}
},
mounted() {
this.timer = setInterval(() => {
... }, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
this.timer = null
}
}
</script>
但是其实更好的做法是：
<script>
export default {
mounted() {
const timer = setInterval(() => {
... }, 1000)
this.$once('hook:beforeDestroy', () => clearInterval(timer))
}
};
</script>
vm.$once( event, callback )
参数：
{string} event{Function} callback用法：监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。
语法
从语法上来看，就是组件内的生命周期函数在执行结束后会 $emit 一个"hook + 生命周期名字" 的自定义事件。
子组件内部监听
这样的话，我们就可以在一个生命周期方法里监听其余生命周期的发生(如上例所示)。
一些情况下确实可以达到优化或简化代码的效果。比如处理组件内多个生命周期的逻辑变得非常简单，简单到只有一句时，这个时候就可以考虑将这些代码放在 created 或者 mounted 里通过这种方式来监听并执行那些简单逻辑。
父组件对子组件监听
当组件内的生命周期函数在执行结束后 $emit 的自定义事件。不仅仅可以在组件内被 $on。vue 的语法决定了这些事件也可以被父组件 v-on 到。
设想一个需求场景：
一个页面里需要加载一个可视化组件，这个组件里面的逻辑极其复杂，存在大量复杂的计算。因为考虑可能要在多个地方使用，就并没有引入主题相关的 loading。我们的需求是什么呢？
就是在数据渲染到页面的之前让页面 loading。mounted 之后停止 loading。beforeUpdata 时开始 loading。updatad 之后停止 loading。
最简单的方法就是改写组件的生命周期函数，使其在 mounted/beforeUpdata/updatad 时通知父组件显示或者隐藏 loading。
这样做显然不好，因为侵入了子组件的逻辑，增加的逻辑也和组件本身的功能好不关联。最好的办法就是使用 v-on=“hook:xxx” 的方式：
<v-chart
@hook:mounted="loading = false"
@hook:beforeUpdated="loading = true"
@hook:updated="loading = false"
:data="data"
/>
这样，就实现了对子组件生命周期的监听。对任意的组件都有效果，包括引入的第三方组件。