Lifecycle diagram `unmounted` => `onUnmounted`

[orionna319]

lifecycle-diagram

Thanks to the community for their contribution. When I used the documentation, I found that the flow chart was inconsistent with the actual situation.

unmounted => onUnmounted

[brc-dd]

Why? I think it's consistent with the naming of other things that are mentioned there like mounted, beforeMount, updated, beforeUpdate... onUnmounted is the hook, unmounted is the event.

[orionna319]

onUnmounted is the hook, unmounted is the event, you are correct.

When I was not very familiar with Lifecycle Hooks, I would look at this flow chart, because mounted is a hook in vue2, so I would think that unmounted is also a hook, and then I would import { unmounted } from 'vue', which confuses me

onUnmounted is the hook, unmounted is the event.

[brc-dd]

Ah, actually if you're using options API, it's still unmounted:

export default {
  unmounted() {
    // ...
  }
}

If you read that page completely, then the section above that image shows the usage (depending on your choice of options/compositions API).

event might be wrong technical term in my earlier comment. I believe it's more like onUnmounted is for composition API, unmounted is for options API. And the diagram explicitly mentions options API.

[orionna319]

So the text described by the red border in the lifecycle-diagram is a hook, but it is a hook for the options API. Since the composition API is officially recommended, can we have a lifecycle-diagram corresponding to the options API and composition API?

The API Preference in the current document defaults to the composition API, and lifecycle-diagram displays the options API hooks. When we switch the API Preference, it may be better to display the lifecycle-diagram corresponding to the hooks.

[bencodezen]

When we switch the API Preference, it may be better to display the lifecycle-diagram corresponding to the hooks.

@orionna319 This is a great suggestion! I'll take a look at how we can implement this.

[bencodezen]

@orionna319 Sorry for the delay on this. Currently working on the best way to explain this, but what do you think of this draft diagram?

[orionna319]

Amazing work. Thank you very much for your contribution, which allows us to better understand composition-api-lifecycle. I'm sorry to reply to you a few days late. I have a question here, onCreated It seems that it is not in composition-api-lifecycle, in the official document.