So I know somethings about vue's life cycle hooks but for some of them I can't think of any real world use case or example that should be done in them and I think it might help me to better understand them by finding out their use case.

here is what I know and don't know about them:

Creation Hooks

1. beforeCreate(): events and lifecycle have been initialized but data has not been made reactive --- use case ??
2. created(): you have access to data and events that are reactive but templates and virtual DOM have not yet been mounted or rendered --- use case: API calls

Mounting Hooks

1. beforeMount(): runs before the initial render --- use case ??
2. mounted(): you have access to the reactive ponent, templates and rendered DOM --- use case: modifying the DOM

Updating Hooks

1. beforeUpdate(): runs after data changes and before the DOM is re-rendered --- use case ??
2. updated(): runs after data changes and the DOM is re-rendered --- use case ??

Destruction Hooks

1. beforeDestroy(): runs before tear down --- use case: clean ups to avoid memory leak
2. destroyed(): runs after tear down --- use case ??

Thanks in advance to anyone helping me to understand these concepts better ;)

So I know somethings about vue's life cycle hooks but for some of them I can't think of any real world use case or example that should be done in them and I think it might help me to better understand them by finding out their use case.

here is what I know and don't know about them:

Creation Hooks

1. beforeCreate(): events and lifecycle have been initialized but data has not been made reactive --- use case ??
2. created(): you have access to data and events that are reactive but templates and virtual DOM have not yet been mounted or rendered --- use case: API calls

Mounting Hooks

1. beforeMount(): runs before the initial render --- use case ??
2. mounted(): you have access to the reactive ponent, templates and rendered DOM --- use case: modifying the DOM

Updating Hooks

1. beforeUpdate(): runs after data changes and before the DOM is re-rendered --- use case ??
2. updated(): runs after data changes and the DOM is re-rendered --- use case ??

Destruction Hooks

1. beforeDestroy(): runs before tear down --- use case: clean ups to avoid memory leak
2. destroyed(): runs after tear down --- use case ??

Thanks in advance to anyone helping me to understand these concepts better ;)

• javascript
• vue.js
• lifecycle

• what do you mean use case, you've already explained everything – Naren Commented Dec 2, 2020 at 18:46
• @Naren I mean for example in what situations you should use beforeCreate hook?? for some of them I know, like you should make your API call in created hook but for others nothing es to my mind and I think it might have some special usage since it is built in vue to have access to them right? if not whats the point of having access to them in the first place?! – hamid niakan Commented Dec 2, 2020 at 18:52

1 Answer 1

According to official VueJS website:

Each Vue instance goes through a series of initialization steps when it’s created - for example, it needs to set up data observation, pile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.

Having that in mind, we have:

beforeCreate

The beforeCreate hook runs at the very initialization of your ponent. data has not been made reactive, and events have not been set up yet.

Usage

Using the beforeCreate hook is useful when you need some sort of logic/API call that does not need to be assigned to data. Because if we were to assign something to data now, it would be lost once the state was initialized.

created

You are able to access reactive data and events that are active with the created hook. Templates and Virtual DOM have not yet been mounted or rendered.

Usage

Using the created method is useful when dealing with reading/writing the reactive data. For example, if you want to make an API call and then store that value, this is the place to do it.

The above are famously called as creation hooks, as opposed to mounting hooks.

Mounting hooks are often the most used hooks. They allow you to access your ponent immediately before and after the first render. They do not, however, run during server-side rendering.

beforeMount

The beforeMount hook runs right before the initial render happens and after the template or render functions have been piled.

Usage

This is the last step you should perform your API calls before it’s unnecessary late in the process because it’s right after created — they have access to the same ponent variables.

mounted

In the mounted hook, you will have full access to the reactive ponent, templates, and rendered DOM (via this.$el).

Usage

Use mounted for modifying the DOM—particularly when integrating non-Vue libraries.

There also some hooks, which are called updating hooks.

Updating hooks are called whenever a reactive property used by your ponent changes or something else causes it to re-render. They allow you to hook into the watch-pute-render cycle for your ponent.

Use updating hooks if you need to know when your ponent re-renders, perhaps for debugging or profiling.

There are:

beforeUpdate

The beforeUpdate hook runs after data changes on your ponent and the update cycle begins, right before the DOM is patched and re-rendered.

Usage

Use beforeUpdate if you need to get the new state of any reactive data on your ponent before it actually gets rendered.

updated

The updated hook runs after data changes on your ponent and the DOM re-renders.

Usage

Use updated if you need to access the DOM after a property change

And last but not least, there are destruction hooks.

Destruction hooks allow you to perform actions when your ponent is destroyed, such as cleanup or analytics sending. They fire when your ponent is being torn down and removed from the DOM.

There are:

destroyed

By the time you reach the destroyed hook, there’s practically nothing left on your ponent. Everything that was attached to it has been destroyed.

Usage

Use destroyed if you need do any last-minute cleanup or inform a remote server that the ponent was destroyed

beforeDestroy

beforeDestroy is fired right before teardown. Your ponent will still be fully present and functional.

Usage

Use beforeDestroy if you need to clean-up events or reactive subscriptions.

This is the stage where you can do resource management, delete variables and clean up the ponent.

Keep in mind that these are the main lifecycle hooks and there are some other minor ones such as activated and deactivated that you can look into.

Here is a link that might help you further down the line.