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

setInterval 开发文档

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

实例中的变量

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

效果图

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

效果图

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

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

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

效果图

优化问题：

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

效果图