vue项目中使用$.once(‘hook:beforeDestory‘,() =＞ {})用法

vue项目中使用$.once(‘hook:beforeDestory‘,() =＞ {})用法

一、清理定时器问题

在vue项目通常我们清理定时器的方法时，通常有两种方法

方法一：
1、首先在vue实例的data中定义定时器的名称：

export default{
data(){
timer:null
}
}

2、在方法（methods）或者页面初始化（mounted()）的时候使用定时器

this.timer = setInterval(()=>{
//需要做的事情
},1000);

 

3、然后在页面销毁的生命周期函数（beforeDestroy()）中销毁定时器

export default{
data(){
timer:null
},
beforeDestroy(){
clearInterval(this.timer);
this.timer = null;
}
}

注： 第一种方法确实是可行的，可是存在的问题是：

1、vue实例中需要有这个定时器的实例，感觉有点多余;

2、 创建的定时器代码和销毁定时器的代码没有放在一起，通常很容易忘记去清理这个定时器，不容易维护;

因此，更推荐第二种方法，使用this.$once(‘hook:beforeDestroy’,()=>{});

方法二：直接在需要定时器的方法或者生命周期函数中声明并销毁,代码如下：

export default{
methods:{
fun1(){
let timer = setInterval(()=>{
//需要做的事情
console.log(11111);
},1000);
this.$once('hook:beforeDestroy',()=>{
clearInterval(timer);
timer = null;
})
}
}
}

二、取消监听事件，取消事件总线的监听比如

const getname = ()=>{xxxx;console.log(1)}
this.$bus.$on(GET_NAME,getname );

vue项目中使用$.once(‘hook:beforeDestory‘,() =＞ {})可以在事件使用完离开页面时销毁
 this.$once('hook:beforeDestroy', () => {
        this.$bus.$off(GET_NAME, getname)
  })