Event handlers fire after `umounted`. Unlike Vue 2, event listeners are not removed between `beforeUnmount` and `unmounted`

[bbotto-pdga]

Version

3.2.31

Reproduction link

stackblitz.com

Steps to reproduce

I need to provide two reproduction links to demonstrate the difference between Vue 2 and Vue 3.

https://stackblitz.com/edit/vue2-vue-cli-ceh9zk?file=src%2Fcomponents%2FAlertList.vue <-- Vue 2
https://stackblitz.com/edit/vue-kurpoq?file=src%2Fcomponents%2FAlertList.vue <-- Vue 3

The component hierarchy is as follows:

App
  -> AlertList
    -> Alert

Alert emits a hide event asynchronously from beforeUnmount.
AlertList handles the Alert's hide event; the handler is wired up in the template.

To reproduce the bug, click the "Toggle Alerts" button, which removes the AlertList, and its Alerts, from the DOM via vIf.

• In the Vue 3 version, the hide event handler fires after AlertList's unmounted lifecycle hook. Consequently, $ref and injected dependencies are not available.
• In the Vue 2 version, event listeners are removed before the component is unmounted (destroyed in Vue 2). As such, the hide event handler does not fire.

What is expected?

Event listeners should be torn down after beforeUnmount and before unmounted. Event handlers should not run after a component is unmounted. As it stands, this is an undocumented breaking change between Vue 2 and Vue 3.

What is actually happening?

Event handlers (in this case, AlertList#logHide) fire after unmounted.

---

Note that in the Vue 2 Lifecycle Diagram, it's clear when event listeners are removed: https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram In Vue 3's Livecycle Diagram, there's no mention of event listeners being removed: https://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram It would be nice if this step were still documented in Vue 3.

For context, our application uses UIkit. Some of the UIkit components emit events asynchronously after an animation occurs. For example, the Offcanvas, Accordion, and Modal components emit hide events after they slide closed, which takes a small amount of time to animate. In our project, we sometimes handle these hide events, but the handlers erroneously (IMO) fire event after the component is unmounted.