Vue 中使用定时器setInterval setTimeout及优化

在Vue 项目的开发中我们会使用到定时器,一下我们以setInterval 为例来讲解一下定时器的用法


setInterval 开发文档

通常情况下在Vue 的项目中我们先定义一个timer,作为等等定时器的变量

实例中的变量

在周期函数mounted中定义定时器的执行函数


效果图

注意这样的写法在Vue的周期中无法实现定时器的效果因为这里存在this的指向问题。我们的setInterval()的第一个参数无法正确获得vue 实例中的方法,我么可以使用箭头函数来调整作用域


效果图

这样我们可以在Vue的对应页面的加载完成之后执行定时器的操作

注意:在页面注销之前要将定时器给注销,不然当你跳转别的页面的时候同样会执行定时器的方法,这样会占用你的资源

注销定时器,可以在beforeDestroy的生命周期中执行clearInterval()销毁定时器


效果图

优化问题:

我们发现了一个问题就是timer的这个变量仅仅只是在我们的两个生命周期中访问到了,但是并没有在其他的地方出现使用,引用尤大大的话将这个timer定义为杂物,同时尤大还提出了我们的建立代码与我们清理代码的是互不相关的,这使得我们比较难于程序化的清理我们建立的所有东西。并且当修改代码的时候往往容易同时清理掉两个部分,这是我们容易忽略的,一下的优化方案:


效果图

你可能感兴趣的:(Vue 中使用定时器setInterval setTimeout及优化)