beforeUnmount vs unmounted

[segevfiner]

Vue has the lifecycle hooks that are called beforeUnmount and unmounted. When is the right use for each one and when should prefer using one vs the other?

[Shyam-Chen]

Develop reusable components can use beforeUnmount, and those who use these reusable components can use unmounted. However, in most cases, you can simply use unmounted for all of them.

[gwyneorge]

So on views -> unmounted
On components used in said views -> beforeUnmount

[wyf027]

The split is not really “views use unmounted, reusable components use beforeUnmount”. It is about timing.

Use beforeUnmount when the cleanup needs the component instance / DOM subtree to still exist. Vue calls it right before unmounting, and the instance is still fully functional. Examples: read a final DOM measurement, notify another object while refs still point at elements, or tear down something that depends on the current DOM being present.

Use unmounted when you only need to clean up external side effects after Vue has removed the component. Vue considers the component unmounted after child components are unmounted and setup-created render/computed/watch effects are stopped. This is the usual place for timers, external DOM listeners, sockets, subscriptions, etc.

So a practical rule is:

onBeforeUnmount(() => {
  // last chance while this component is still alive
})

onUnmounted(() => {
  // normal external cleanup after Vue has torn it down
})

For most simple cleanup, onUnmounted is enough. Reach for onBeforeUnmount only when the cleanup specifically needs the still-mounted state.