在 Vue 3 单文件组件中，应使用 ref 存储定时器 ID，在 onMounted 中启动、onUnmounted 中判断存在性后清除并置 null，避免内存泄漏。
在 Vue 单文件组件中使用 onUnmounted 清除定时器，核心是：**在 setup 中用响应式变量保存定时器 ID，并在 onUnmounted 里调用 clearInterval 或 clearTimeout**。这是 Vue 3 Composition API 的标准做法，能有效防止内存泄漏。
定时器必须在 setup 内创建并保存引用
不能把定时器挂到 this（选项式写法已过时），也不能用局部常量（如 const timer = setInterval(...)）——那样在 onUnmounted 里拿不到引用。
- 推荐用
ref存储定时器 ID，确保响应式上下文可访问 - 在
onMounted中启动定时器，避免组件未挂载就执行 DOM 操作 - 定时器逻辑建议封装成独立函数，提升可读性和复用性
onUnmounted 中安全清除定时器
清除前务必做存在性判断，防止重复清除或清除 null/undefined 引用报错：
- 检查
timer.value是否为真值（if (timer.value)） - 清除后手动置
null或undefined，便于调试和避免误用 - 不要在
onBeforeUnmount里清除（它触发早于子组件卸载完成），onUnmounted才是最终可靠时机
完整示例（.vue 文件）
以下是一个带倒计时功能的组件片段，展示了从定义、启动到清理的全流程：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
立即学习“前端免费学习笔记（深入）”；
script setup
import { ref, onMounted, onUnmounted } from 'vue'
const count = ref(0)
const timer = ref(null)
const startCounting = () => {
count.value = 0
timer.value = setInterval(() => {
count.value++
}, 1000)
}
onMounted(() => {
startCounting()
})
onUnmounted(() => {
if (timer.value) {
clearInterval(timer.value)
timer.value = null
}
})
模板中可直接使用 {{ count }} 显示数值。组件被移除（如路由跳转、v-if 变为 false）时，定时器自动停止。
常见陷阱提醒
实际开发中容易忽略的细节：
- 多个定时器共存时，每个都要单独声明
ref并分别清理 - 使用
setTimeout时同样适用该模式，只是调用clearTimeout - 若定时器逻辑依赖 props 或响应式数据，注意闭包捕获问题；必要时用
watchEffect+onCleanup更稳妥 - 在组合式函数（如
useCountdown）中，应将onUnmounted调用封装进函数内部，避免使用者遗漏
