Vue如何优雅的清除定时器
更新时间：2021年07月22日 11:38:05 作者：8号的凌晨4点
定时器如果不及时合理地清除，会造成业务逻辑混乱甚至应用卡死的情况，这个时就需要清除定时器，本文就介绍了Vue如何优雅的清除定时器，感兴趣的可以了解一下
前言
清除定时器，相信有相当一部分人是这么写的：
export default {
data() {
reurn {
timer: null
}
},
mounted() {
this.timer = setInterval(() => {
console.log('setInterval')
}, 2000)
},
beforeDestroy() {
clearInterval(this.timer)
}
}
这是一段常见的代码，至少我身边的好几个小伙伴（1-3年经验的都有）都是这么写的，这里存在3个不优雅的问题：
- clearInterval 后没有清空 timer 为 null。
- 开启定时器和清除定时器的代码分散开在两个地方，有损可读性/维护性，用尤大大的话说，这使得我们比较难于程序化地清理我们建立的东西。
- timer 被定义在 data 里，实际上 timer 不需要什么响应式操作，定义在 data 里是没必要的，反而造成性能浪费。
优化
直接上代码：
export default {
data() {
reurn {
}
},
mounted() {
let timer = setInterval(() => {
console.log('setInterval')
}, 2000)
this.$once('hook:beforeDestroy', () => {
clearInterval(timer)
timer = null
})
}
}
这里使用 hook 监听 beforeDestroy 生命周期，这样 timer 只需被定义在生命周期里，以上的问题就全部解决了。
衍生问题：beforeDestroy 没有触发？
在后台系统中，我们常常会设置页面缓存，而当路由被 keep-alive 缓存时是不走 beforeDestroy 生命周期的，所以有些小伙伴以为在 beforeDestroy 清除定时器就完事了，甚至都没有检查一下，实际上定时器并没有被清除掉。知道了原因也就好解决了，借助 activated 和 deactivated 这两个生钩子：
export default {
data() {
reurn {
}
},
mounted() {
let timer = setInterval(() => {
console.log('setInterval')
}, 2000)
this.$on('hook:activated', () => {
if (timer === null) { // 避免重复开启定时器
timer = setInterval(() => {
console.log('setInterval')
}, 2000)
}
})
this.$on('hook:deactivated', () => {
clearInterval(timer)
timer = null
})
}
}
这里需要注意一下，由于缓存原因，所以需要用 $on 而不是 $once，不然执行一次后就不会再触发了。
到此这篇关于Vue如何优雅的清除定时器的文章就介绍到这了,更多相关Vue 清除定时器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
浅谈vue的iview列表table render函数设置DOM属性值的方法
下面小编就为大家带来一篇浅谈vue的iview列表table render函数设置DOM属性值的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
在Vue 3中,getCurrentInstance是一个用于获取当前组件实例的重要函数,以下是对getCurrentInstance的详细分析,感兴趣的朋友一起看看吧2024-12-12
这篇文章主要介绍了Vue中前端与后端如何实现交互，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
下面小编就为大家分享一篇vue项目中的webpack-dev-sever配置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了vue 打包后找不到dist文件夹的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
vue中使用百度脑图kityminder-core二次开发的实现
这篇文章主要介绍了vue中使用百度脑图kityminder-core二次开发的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要为大家详细介绍了Proxy中代理数据拦截的方法，文中的示例代码讲解详细，对我们学习或工作具有一定的借鉴价值，需要的可以参考一下2022-12-12
这篇文章主要介绍了vue2.0中goods选购栏滚动算法的实现代码,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了vue后台管理之动态加载路由的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
很多Vue项目中都需要PDF文件预览功能,比如合同ERP,销售CRM,内部文档CMS管理系统,内置PDF文件在线预览功能,下面这篇文章主要给大家介绍了关于如何在vue中实现文件预览功能的相关资料,需要的朋友可以参考下2022-10-10
最新评论