onunmounted 是 vue 3 composition api 中用于组件销毁前清理资源的标准钩子，必须在使用定时器、全局事件监听器、第三方实例、未完成请求及手动 store/watch 订阅时调用以防止内存泄漏。

在 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 执行。