vue中使用setInterval()循环定时器的注意事项

问题描述在我们的项目中，经常需要使用定时器来做一些重复性的工作，比如接口轮询更新数据。本文记录一些在vue项目中使用定时器的注意事项。使用定时器时的注意事项定时器使用时主要要注意以下几点。)在定时器页面离开时清空定时器或者以点击按钮等事件的形式清空定时器。特别要注意缓存的组件中是否使用了定时器，即keep-alive包裹的组件中是否使用了定时器1.正常情况下使用定时器假设我们有两个按钮，点击一个启动定时器，然后单击另一个结束定时器。代码如下：如果页面一进来就执行定时器，可以在挂载的钩子中写一个定时器让它执行，注意要加上if判断，要清空定时器。代码如下：挂载的钩子注册定时器必须及时清除，那么逻辑就会走else，这个时候会注册一个定时器，循环调用相应的逻辑代码。后续有三种情况。情况一：路由跳转，跳转，必须清除定时器，所以需要在beforeDestroyhook中清除定时器情况二：关闭项目，项目关闭后，系统会自动停止定时器。别担心。情况三：刷新页面。这时候vue组件的钩子不会执行beforeDestroy和destroyed钩子，所以需要加上if进行判断。如果有timer就会清空，所以挂载钩子if判断的原因就在这里*/if(this.timer){clearInterval(this.timer);}else{this.timer=setInterval(this.getConsole,1000);}},方法：{getConsole(){console.log("timer");},},beforeDestroy(){clearInterval(this.timer);},情况2，如果在keep-alive中使用了定时器，用keep-alive包裹组件后，组件的生命周期如下：-初始进入组件离开创建--->挂载--->activated-->deactivated-后续进入离开activated-->deactivated所以如果你想在keep-alive包裹的组件中使用timer，又想组件一进入就执行timer，只能这样写在激活的钩子中执行计时器。当然，清除定时器必须写在deactivated钩子中。.因为用keep-alive包裹的组件没有beforeDestroy、destroyed等钩子，mounted钩子只会执行一次。如果是点击事件执行或者清除定时器，正常写就可以了。定时器执行：activated(){//这里定时器也要及时清空if(this.timer){clearInterval(this.timer);}else{this.timer=setInterval(()=>{console.log("start---");},1000);}},timercleared:deactivated(){clearInterval(this.timer)this.timer=null},如果想了解keep-alive更详细的用法，可以看我的另一篇文章：https://segmentfault.com/一个/11...