vue中的定时器清不掉,vue 定时器销毁在哪一步操作
如果没有及时合理的清除定时器，会造成业务逻辑混乱甚至应用卡顿。这一次，有必要清除计时器。本文介绍了Vue如何优雅地清零定时器，有兴趣的可以看看。
目录
前言
使最优化
衍生问题：beforeDestroy没有触发？
前言
清空定时器。我相信相当多的人这样写道：
导出默认值{
data() {
reurn
计时器：空
}
},
已安装(){
this.timer=setInterval(()={
console.log(setInterval )
}, 2000)
},
销毁前(){
clearInterval(this.timer)
}
}
这是一个常见的代码，至少是我身边的几个朋友写的(有1-3年经验的)。这里有三个不雅的问题：
clearInterval后未清除。计时器为空。
启动定时器和清除定时器的代码分散在两个地方，这对可读性/可维护性是不利的。换句话说，这使得我们更难有计划地清理我们构建的东西。
定时器在数据中定义。其实定时器不需要任何响应式的操作。没有必要在数据中定义定时器，但是它浪费了性能。
优化
直接装载代码：
导出默认值{
data() {
reurn
}
},
已安装(){
设timer=setInterval(()={
console.log(setInterval )
}, 2000)
这个。$once(hook:beforeDestroy ，()={
清除时间间隔(定时器)
计时器=空
})
}
}
这里用hook来监控beforeDestroy的生命周期，这样只需要在生命周期中定义timer，以上问题都解决了。
衍生问题：beforeDestroy 没有触发？
在后台系统中，我们经常会设置页面缓存，但是当路由被keep-alive缓存时，并没有占用beforeDestroy的生命周期，所以有朋友以为在beforeDestroy中清除定时器就行了，甚至都没有检查。事实上，计时器还没有清零。知道原因，就好解决了。借助激活和停用的挂钩：
导出默认值{
data() {
reurn
}
},
已安装(){
设timer=setInterval(()={
console.log(setInterval )
}, 2000)
这个。$on(hook:activated ，()={
if(timer===null){///避免重复启动计时器
timer=setInterval(()={
console.log(setInterval )
}, 2000)
}
})
这个。$on(hook:deactivated ，()={
清除时间间隔(定时器)
计时器=空
})
}
}
这里需要注意的是，因为缓存的原因，应该使用$on而不是$once，否则执行一次就不会触发。
这就是这篇关于Vue如何优雅地清除计时器的文章。关于Vue清除计时器的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。