Vue 单文件组件怎么使用 onUnmounted 清除定时器-Vue.js-PHP中文网

在 Vue 3 单文件组件中，应使用 ref 存储定时器 ID，在 onMounted 中启动、onUnmounted 中判断存在性后清除并置 null，避免内存泄漏。

vue 单文件组件怎么使用 onunmounted 清除定时器

在 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）时，定时器自动停止。