Vue路由切换时如何清除组件中的setInterval定时器？

当路由切换时，<router-view>中的旧组件会被销毁，但组件内的setInterval若未主动清除，会持续在后台运行造成资源浪费。解决核心是在组件销毁阶段清除定时器，具体实现步骤如下：

1. 保存定时器ID
   在组件data中声明变量存储定时器ID，确保后续能精准定位并清除该定时器：

data() {
  return {
    intervalId: null
  }
}

2. 初始化时绑定定时器ID
   修改mounted钩子代码，将setInterval的返回值（唯一定时器ID）存入实例变量：

mounted() {
  this.fetchLastBucketData();
  this.intervalId = setInterval(() => {
    this.fetchLastBucketData();
  }, 3000);
}

3. 组件销毁前清除定时器
   使用Vue的生命周期钩子，在组件销毁前调用clearInterval终止定时器：

• Vue 3 推荐使用beforeUnmount钩子：

beforeUnmount() {
  if (this.intervalId) {
    clearInterval(this.intervalId);
    this.intervalId = null; // 释放引用，避免内存泄漏
  }
}

• Vue 2 使用destroyed钩子：

destroyed() {
  if (this.intervalId) {
    clearInterval(this.intervalId);
    this.intervalId = null;
  }
}

特殊场景补充：组件使用<keep-alive>缓存 #

若组件被<keep-alive>缓存，路由切换时组件不会销毁，而是触发deactivated和activated钩子。此时需调整为：

activated() {
  this.fetchLastBucketData();
  this.intervalId = setInterval(() => {
    this.fetchLastBucketData();
  }, 3000);
},
deactivated() {
  if (this.intervalId) {
    clearInterval(this.intervalId);
    this.intervalId = null;
  }
}

内容的提问来源于stack exchange，提问作者Alvaro Navarrete