用途一:在同一个组件中
如何监听实例的某个生命周期,并执行相应的操作?简单语法如下:
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;
}
}
这种方法存在的问题是:
- vue实例中需要有这个定时器的实例,感觉有点多余;
- 创建的定时器代码和销毁定时器的代码没有放在一起,通常很容易忘记去清理这个定时器,不容易维护;
怎么避免这个问题呢?
可以用 hook来监听 beforeDestory 生命周期。因为只要监听一次就够了,所以用$once来注册监听。
export default{
methods:{
fn(){
const timer = setInterval(()=>{
//具体执行代码
console.log('1');
},1000);
this.$once('hook:beforeDestory',()=>{
clearInterval(timer);
timer = null;
})
}
}
}
用途二:在父组件监听子组件的生命周期方法
父组件如何在子组件的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...
}
},