What is the use case for each vue.js life cycle hooks?

user_12078942 0
Viewed 1054

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 component, 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 ;)

vue.js lifecycle javascript
1 Answers

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, compile 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.

enter image description here

Having that in mind, we have:

beforeCreate

The beforeCreate hook runs at the very initialization of your component. 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 component 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 compiled.

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 component variables.

mounted

In the mounted hook, you will have full access to the reactive component, 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 component changes or something else causes it to re-render. They allow you to hook into the watch-compute-render cycle for your component.

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

There are:

beforeUpdate

The beforeUpdate hook runs after data changes on your component 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 component before it actually gets rendered.

updated

The updated hook runs after data changes on your component 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 component is destroyed, such as cleanup or analytics sending. They fire when your component 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 component. 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 component was destroyed

beforeDestroy

beforeDestroy is fired right before teardown. Your component 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 component.

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.

user_121717560
Related