参考： https://www.cnblogs.com/woniubushinide/p/9282560.html

vue 是单页面应用，路由切换后，定时器并不会自动关闭，需要手动清除，当页面被销毁时，清除定时器即可。

首先我在data函数里面进行定义定时器名称：

data() {            
    return {                              
        timer: null  // 定时器名称          
mounted(){
this.timer = (() => {
    // 某些操作
}, 1000)
//最后在beforeDestroy()生命周期内清除定时器：
beforeDestroy() {
    clearInterval(this.timer);        
    this.timer = null;
方案1有两点不好的地方，引用尤大的话来说就是：
 
它需要在这个组件实例中保存这个 timer，如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。
我们的建立代码独立于我们的清理代码，这使得我们比较难于程序化的清理我们建立的所有东西。
 
解决方案2：
 
该方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。以下是完整代码：
 
const timer = setInterval(() =>{                    
    // 某些定时器操作                
}, 500);            
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
类似于其他需要在当前页面使用，离开需要销毁的组件（例如一些第三方库的picker组件等等），都可以使用此方式来解决离开后以后在背后运行的问题。
 
综合来说，我们更推荐使用方案2，使得代码可读性更强，一目了然。如果不清楚$once、$on、$off的使用，这里送上官网的地址教程，在程序化的事件侦听器那里。
                    参考：https://www.cnblogs.com/woniubushinide/p/9282560.htmlvue 是单页面应用，路由切换后，定时器并不会自动关闭，需要手动清除，当页面被销毁时，清除定时器即可。方案一：首先我在data函数里面进行定义定时器名称：data() {                return {                         ...
				
最近项目碰到需要实时刷新数据的问题，使用了setInterval实现，发现路由跳转之后，组件被销毁了，但是setInterval还没有销毁，还在继续后台调用，如果运行量大的话，会导致严重的页面卡顿。
解决办法：在组件生命周期beforeDestroy中清除定时器
beforeDestroy(){
 clearInterval(this.timer)
但是在路由包含在keep-alive里的时候，beforeDestroy()不会执行
				
正常情况下，在data里定义homeSetInterval 保存定时器的ID值 ，在销毁组件是使用clearInterval方法是可行的
但在使用了如下的keep缓存模式在使用销毁模式不行了
应该使用离开路由器前方法beforeRouteLeave
补充知识：vue中使用定时器的坑
我们在使用vue的脚手架去搭建开发环境的时候，在A页面写入一个定时器去定时请求一个接口，但是我们去B页面，C页面的时候都会有这个接口定时请求的现象，那么怎样处理呢？
首先我在data函数里面进行定义定时器名称：
data() {
  return {
    timer: null // 定时器名
beforeDestroy() {    
 if (this.time) { //如果定时器还在运行 或者直接关闭，不用判断
   clearInterval(this.time); //关闭
this.t...
之前在做ADTS项目的时候，首页是一个实时监测的页面，需要每隔5秒更新一次数据，而业务逻辑上的需要先请求告警列表的接口的，从告警列表中拿到数据再去获取其他的数据，所以我在获取告警列表的方法中增加了一个定时器。
最开始我是将定时器声明在组件内部的（由于页面不多，数据关联也不太强，所以项目中没有使用store进行数据管理），后来清除的时候发现无法清除，后来索性声明到window下了。然后在组件内部写了如下代码：
发现也没能将定时器清除，后来走debug发现根本就没有进到这个方法中去，然后就去问同事有没有遇到过类似的问题。
后来同事建议我将路由离开事件的代码放到配置了路由的界面中，
				
setInterval() 方法可按照指定的周期(以毫秒计)不停地调用函数或表达式，直到clearInterval()被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
提示：如果你只想执行一次可以使用setTimeout()方法。
您可以使用Vue.js的setTimeout()函数来实现页面跳转定时器开始启动代码，具体如下：let timer = setTimeout(() => {
  this.$router.push('/destination');
}, 3000);