vue定时器中间变颜色(Vue如何优雅的清除定时器)
类别:编程学习 浏览量:2386
时间:2021-10-13 00:32:58 vue定时器中间变颜色
Vue如何优雅的清除定时器目录
- 前言
- 优化
- 衍生问题:beforeDestroy 没有触发?
清除定时器,相信有相当一部分人是这么写的:
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 只需被定义在生命周期里,以上的问题就全部解决了。
在后台系统中,我们常常会设置页面缓存,而当路由被 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路由有几种实现模式(Vue实现路由过渡动效的4种方法)
- vue 富文本图片上传(vue.js云存储实现图片上传功能)
- vue 底层原理(浅谈Vue插槽实现原理)
- vue多个对象实现双向数据绑定(利用js实现Vue2.0中数据的双向绑定功能)
- vuejs filter过滤器的使用(Vue过滤器filter实现及应用场景详解)
- vue封装组件技巧(浅谈vue中所有的封装方式总结)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- vue如何导入excel(Vue实现导入Excel功能步骤详解)
- vue3.0 黑暗风格(Vue3.0 手写放大镜效果)
- vue左右滑屏(vue中实现全屏以及对退出全屏的监听)
- vue一个组件两种样式(Vue实现动态样式的多种方法汇总)
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- vue左右联动列表(vue+iview的菜单与页签的联动方式)
- vue怎么接收后台的数据(Vue封装全局toast组件的完整实例)
- vue是怎样进行页面跳转(Vue实现登陆跳转)
- vue怎么实现输入框(vue车牌输入组件使用方法详解)
- 新款起亚霸锐实拍,比普拉多气派,配3.0T V6,引入国内或许能大卖(新款起亚霸锐实拍)
- ()
- 张勇 阿里新任掌门人(阿里新任掌门人)
- 毛戈平全国第一柜花落银泰 高端国货迎来 高光 时刻(毛戈平全国第一柜花落银泰)
- 14岁丧父 20岁丧母,从苦难走向辉煌的银泰创始人沈国军(14岁丧父20岁丧母从苦难走向辉煌的银泰创始人沈国军)
- 银泰集团董事长沈国军获评 北京影响力 十大企业家(银泰集团董事长沈国军获评)
热门推荐
- JS实现金额大小写转换
- docker harbor 配置中央仓库(Docker Gitlab+Jenkins+Harbor构建持久化平台操作)
- 私有云需要企业自己买服务器吗(企业如何对私有云主机进行管理?)
- php建造者模式实例(PHP工厂模式、单例模式与注册树模式实例详解)
- centos7设置开机启动脚本(Centos7.3开机自动启动或执行指定命令操作)
- mysql mvcc 流程(Mysql MVCC机制原理详解)
- nginx配置详解(nginx请求限制配置方法)
- linux巡检命令手册(Linux xargs命令的使用)
- dedecms幻灯片代码(dedecms实现大图showphoto.htm输出图集内容简介方法)
- python怎么用pandas读取两列数据(python 利用pandas将arff文件转csv文件的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9