Vue3组合式API：组件卸载时如何注销回调函数

直接给结论：完全应该用onUnmounted，这是Vue3官方组合式API里专门用于组件销毁/卸载阶段执行清理逻辑的钩子，也是处理这类场景的标准做法。

场景一：注销需要清理的回调函数 #

比如注册了全局事件监听、第三方库的回调等，都可以在onMounted里注册，onUnmounted里注销：

<script setup>
import { onMounted, onUnmounted } from 'vue'

// 定义需要注册的回调
const handleWindowResize = () => {
  console.log('窗口尺寸变化了')
}

// 组件挂载完成后注册回调
onMounted(() => {
  window.addEventListener('resize', handleWindowResize)
})

// 组件卸载时注销回调，避免内存泄漏
onUnmounted(() => {
  window.removeEventListener('resize', handleWindowResize)
})
</script>

场景二：清理setInterval/setTimeout #

定时器这类异步任务，必须在组件卸载时手动清除，同样用onUnmounted：

<script setup>
import { onMounted, onUnmounted } from 'vue'

let timerId = null

onMounted(() => {
  // 启动定时器
  timerId = setInterval(() => {
    console.log('每隔2秒执行一次任务')
  }, 2000)
})

onUnmounted(() => {
  // 组件卸载时清除定时器
  clearInterval(timerId)
})
</script>

自定义组合式函数中的清理逻辑 #

如果把这些逻辑封装成自定义组合式函数，也可以直接在函数内部使用onUnmounted，Vue会自动将这个钩子关联到调用该函数的组件上，无需额外处理：

// 自定义组合式函数：useTimer.js
import { onMounted, onUnmounted } from 'vue'

export function useTimer(callback, interval) {
  let timer = null

  onMounted(() => {
    timer = setInterval(callback, interval)
  })

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

// 在组件中使用
<script setup>
import { useTimer } from './useTimer'

useTimer(() => {
  console.log('自定义函数管理的定时器')
}, 1500)
</script>

不用刻意对标React的useEffect，Vue3的组合式API是通过生命周期钩子来清晰划分不同阶段的逻辑，onUnmounted就是卸载阶段的专属工具，直接用就对了。

内容的提问来源于stack exchange，提问作者TKoL