Vue.js 3中如何合理使用setInterval与clearInterval？

安全阿岳

2026-7-7

Vue3 定时器优化实现方案

你的当前方案是可行的，但确实没必要将timer定义为响应式的ref变量——因为timer仅用于存储定时器ID，并不会在模板或响应式依赖中被使用，响应式包装反而会带来不必要的额外开销（虽然这个开销极小，但从代码合理性角度来说完全可以避免）。

更优实现方式：使用普通闭包变量

直接在setup中用普通变量存储定时器ID即可，利用setup的闭包特性，onUnmounted的回调可以正常访问到这个变量：

<script setup lang="ts">
import { onUnmounted } from "vue";

// 普通变量存储定时器ID，无需响应式
let timer: number | null = null;

// 启动定时器
timer = setInterval(() => {
  // 每秒执行的变量更新逻辑
  console.log("执行变量更新");
}, 1000);

// 组件卸载时清理定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
    timer = null; // 手动置空，避免潜在的内存泄漏风险
  }
});
</script>

扩展场景：支持手动启停定时器

如果需要在组件内部手动控制定时器的启停（比如用户点击按钮），普通变量的方案同样适用，代码结构更清晰：

<script setup lang="ts">
import { onUnmounted } from "vue";

let timer: number | null = null;

// 启动定时器方法（启动前先清理已有定时器，避免重复创建）
const startTimer = () => {
  if (timer) clearInterval(timer);
  timer = setInterval(() => {
    console.log("执行变量更新");
  }, 1000);
};

// 停止定时器方法
const stopTimer = () => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
};

// 组件挂载时自动启动定时器
startTimer();

// 组件卸载时自动停止
onUnmounted(stopTimer);
</script>