Vue3 Composition - how to UnRegister a callback when component unmounts

Question

I've read multiple questions on stackoverflow talking about Vue3's version of useEffect, but none of them go explicitly into detail on this question:

Imagine I have a composition component, and I register a callback inside that component that needs to be unregistered when the component no longer exists, or maybe I create a setInterval function that needs to have clearInterval called on it when the component unmounts. What's the proper pattern to do that?

Should I use onUnmounted?

Answer 1

Yes, you could use onUnmounted :

let interval = null;
onMounted(() => {
    interval = setInterval(()=>someFunc, 1000)
})

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