vue中使用$.once(‘hook:beforeDestory‘,() => {})清理定时器
vue中使用$.once(‘hook:beforeDestory’,() => {})清理定时器在vue项目清理定时器,通常有两种方法方法一:1、首先在vue实例的data中定义定时器的名称:我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:全新的界面设计 ,将会带来全新的写作体验;在创作...
·
vue中使用$.once(‘hook:beforeDestory’,() => {})清理定时器
在vue项目清理定时器,通常有两种方法
方法一:
1、首先在vue实例的data中定义定时器的名称,
2、在方法(methods)或者页面初始化(mounted())的时候使用定时器
3、然后在页面销毁的生命周期函数(beforeDestroy())中销毁定时器
实现代码:
export default{
data(){
timer:null
},
mounted(){
this.timer = setInterval(()=>{
//具体执行内容
console.log('1');
},1000);
}
beforeDestory(){
clearInterval(this.timer);
this.timer = null;
}
}
注: 第一种方法存在的问题是:
*1、vue实例中需要有这个定时器的实例,感觉有点多余;
2、 创建的定时器代码和销毁定时器的代码没有放在一起,通常很容易忘记去清理这个定时器,不容易维护;*
因此,更推荐第二种方法,使用this.$once(‘hook:beforeDestroy’,()=>{});
方法二:直接在需要定时器的方法或者生命周期函数中声明并销毁
实现代码:
export default{
methods:{
fun1(){
const timer = setInterval(()=>{
//具体执行代码
console.log('1');
},1000);
this.$once('hook:beforeDestroy',()=>{
clearInterval(timer);
timer = null;
})
}
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)