The life of Vue app: Lifecycle Hooks♻️

Overview

In Vue there are many steps of app's lifecycle, each Vue component instance goes through a series of initialization steps when it's created.
These steps called Lifecycle Hooks.
In this article will explains what are Lifecycle Hooks and how to use it.
Let's start! 🤙

What are Lifecycle Hooks?

Lifecycle Hooks are a series of initialization steps where it possbile to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes.

<script setup>
import { onMounted } from 'vue'

onMounted(() =>  console.log("Hello mounted component!"))
</script>

In the above example the use of the onMounted() Hook is shown.
When the component is mounted, the code inside the callback given to onMounted() will be executed and print the message to the console.

Diagram

The above image is the official Vue diagram of Lifecycle Hooks where are illustrate the phases of Lifecycle:

1. onBeforeMount(), when this hook is called, the component has finished setting up its reactive state, but no DOM nodes have been created yet. It is about to execute its DOM render effect for the first time.
2. onMounted(): this hook is used for performing side effects that need access to the component's rendered DOM, or for limiting DOM-related code to the client in a server-rendered application.
3. onBeforeUpdate(): this hook can be used to access the DOM state before Vue updates the DOM.
4. onUpdated(): this hook is called after DOM update of the component, which can be caused by different state changes, because multiple state changes can be batched into a single render cycle for performance reasons.
5. onBeforeUnmount(): when this hook is called, the component instance is still fully functional.
6. onUnmounted(): use this hook to clean up manually created side effects such as timers, DOM event listeners or server connections.

onBeforeMount(), onBeforeUpdate(), onBeforeUnmount() and onUnmounted() are not called during server-side rendering.

Conclusion

Lifecycle Hooks are very powerful features to take advantage of when implementing components in a Vue application to manipulate the DOM, clean up dirty data, etc.
It is recommended to make good use of it.
Happy coding!✨

Hi👋🏻
My name is Domenico, software developer passionate of Vue.js framework, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my projects 🫰🏻

Linktree: https://linktr.ee/domenicotenace

Follow me on dev.to for other articles 👇🏻

Domenico TenaceFollow

Passionate about the IT world and everything related to it ✌🏻 Vue and Open Source enthusiastic 🦠