Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
bbotto-pdga opened this issue Apr 6, 2022 · 0 comments · Fixed by #5679
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🐞 bug Something isn't working

Comments

@bbotto-pdga
Copy link

bbotto-pdga commented Apr 6, 2022

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.

@LinusBorg LinusBorg added 🐞 bug Something isn't working 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Apr 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🐞 bug Something isn't working
Projects
None yet
2 participants