setup中如何处理组件销毁逻辑？onUnmounted使用详解

在 Vue 3 Composition API 中，`onUnmounted` 是防止内存泄漏和副作用残留的关键钩子，它确保组件销毁前能及时清理定时器、全局事件监听器、第三方库实例、未完成的异步请求（配合 AbortController）以及手动创建的 store/watch 订阅等资源；本文通过清晰的场景分类和可直接复用的实战代码，揭示了那些看似简单却极易被忽视的清理逻辑——只要你在组件中“开启”了什么，就必须在 `onUnmounted` 中“关闭”它，这是写出健壮、可维护 Vue 应用的底层守则。

在 Vue 3 的 Composition API 中，onUnmounted 是处理组件销毁前清理工作的标准方式，主要用于释放资源、取消定时器、解绑事件监听器、中断请求等，避免内存泄漏或副作用残留。

什么时候必须用 onUnmounted？

当组件中存在以下操作时，应在 onUnmounted 中主动清理：

• 使用 setInterval 或 setTimeout 创建的定时器
• 通过 window.addEventListener 或 document.addEventListener 绑定的全局事件
• 使用第三方库（如 Chart.js、Map SDK）创建的实例或监听器
• 发起但尚未完成的异步请求（需配合 abort controller 取消）
• 手动订阅的 Vuex/Pinia store 订阅器（store.$subscribe）或 watch 回调（若未使用 watch 返回的停止函数）

基本用法：清理定时器

这是最典型的场景。在 setup 中定义并启动定时器，同时在卸载时清除：

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    let timer = null

    onMounted(() => {
      timer = setInterval(() => {
        console.log('tick')
      }, 1000)
    })

    onUnmounted(() => {
      if (timer) clearInterval(timer)
    })
  }
}

结合 AbortController 取消请求

现代 fetch 支持 AbortController，可在组件卸载时中止进行中的请求：

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    let controller = null

    onMounted(async () => {
      controller = new AbortController()
      try {
        const res = await fetch('/api/data', {
          signal: controller.signal
        })
        const data = await res.json()
        console.log(data)
      } catch (err) {
        if (err.name === 'AbortError') {
          console.log('请求已被取消')
        } else {
          console.error(err)
        }
      }
    })

    onUnmounted(() => {
      if (controller) controller.abort()
    })
  }
}

解绑全局事件监听器

监听键盘、窗口大小等全局事件时，务必在卸载时移除：

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const handleResize = () => {
      console.log('窗口尺寸变化')
    }

    onMounted(() => {
      window.addEventListener('resize', handleResize)
    })

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize)
    })
  }
}

不复杂但容易忽略 —— 只要组件里有“开启”动作，就要考虑对应“关闭”动作，并交给 onUnmounted 执行。

本篇关于《setup中如何处理组件销毁逻辑？onUnmounted使用详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！