用途一：在同一个组件中
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...
}
},
