vue项目中轮询及清除定时器（清除定时器不成功）

首先排查一下你的组件有没有使用< keep-alive >，下面先说一下keep-alive是什么吧

keep-alive

keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素。

当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行

activated
在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。

deactivated
在组件被停用时调用。

<keep-alive include="bookLists,bookLists">
      <router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
      <router-view></router-view>
</keep-alive>

include属性表示只有name属性为bookLists，bookLists的组件会被缓存，（注意是组件的名字，不是路由的名字）其它组件不会被缓存exclude属性表示除了name属性为indexLists的组件不会被缓存，其它组件都会被缓存

使用了keep-alive

<template>
  <keep-alive>
    <router-view />
  </keep-alive>
</template>

在data中：

data () {
  return {
    timer: null // 定时器
  }
}

在activated中设置定时器：

activated () {
  this.timer = setInterval(() => {
    //  这里写你需要执行的代码
  }, 1000)
},

在deactivated中清除定时器：

deactivated () {
  // 页面关闭（路由跳转）时清除定时器
  clearInterval(this.timer)
  this.timer = null
}

没有keep-alive

data中的数据不变

在mounted中设置定时器：

mounted() {
   this.timer = setInterval(() => {
    //  定时器中执行的代码
   }, 1000)
}

在beforeDestroy中清除定时器：

beforeDestroy() {
   // 页面关闭（路由跳转）时清除定时器
   clearInterval(this.timer)
   this.timer = null
 },