A guide to Vue Lifecycle hooks.

Kolly — Fri, 22 Mar 2024 05:27:22 +0000

What you will learn

Understanding all the vue js hooks, vuex ( a state management tool ), and state options, will give you the flexibility you need to build a functional software product. This article will introduce you to vue js hooks , it will also give you the basic understanding on how and when to use these hooks. However, if you are willing to know more about the related topics stated above, here is a link to guide you on that.

Prerequisite

A basic knowledge of vue js is enough for you to quickly grasp all the concept i will be discussing in this article. Also, having a solid foundation on other front-end frameworks will make it easier for you to understand faster. However, it's not a requirement.

Vue js lifecycle hooks

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted

Let's take a closer look at how and when to use these hooks.

beforeCreate

It's called once, when the vue instance is being initialized, what do i mean about "initialized vue instance". Well, a vue instance is initialized so that the data, watcher, computed, methods can processed. you can also call this data related options(state options).

beforeCreate(){
  console.log('instanced initialized')
}

created

Created is called after all the state options has been processed. However, the instance has not been mounted to the DOM (document object model). You cannot access the DOM at this stage, because the component have not been mounted. You can only fetch data from back-end, and also manipulate the reactive data.

created(){
  console.log("is Processed state options'")
}

beforeMount

This is the stage where the created hook has been completed , the reactive state has been processed , and ready to be mounted on the DOM . What happen before it's being mounted ? think about it !..before it's being mounted.

beforeMount(){
   console.log("before mount")   
}

Mounted

Mounted is called after the component DOM has been created and added to the parent component. You can access the reactive component, manipulate the DOM elements.

mounted(){
    console.log("mounted")
}

beforeUpdate

This hook can be used to modify the DOM, before it's updated. it's invoked immediately after a part of the component being rendered changed, due to re-evaluation in the data options.

beforeUpdated(){
    console.log("before component update")
}

updated

This hook is called in your application when there is a change in the reactive data , which has caused a DOM update of the component. However, a lot of people still confuse this to watcher, which listen to change in reactive data, while updated hook listen to change in virtual DOM.

updated(){
    console.log("updated");
}

beforeUnmount

This hook is called right before a component is unmounted, while the component instance is still active and working efficiently.

beforeUnmount(){
   console.log("before unmount")
}

unmounted

Vue instance have been unmounted , if the component instance , DOM , reactive data , watcher has been stopped. you can use this if you have to inform a server that your component has been unmounted or send analysis.

unmounted(){
   console.log("component unmounted")
}

Conclusion

In this article , you were introduced to vue js hooks and its use case. you can apply this knowledge by implementing these hooks in your application. Don't forget to like share and comment, happy coding!!!

Stay tune for my next blog series, Rudiments.

DEV Community: Kolly

A guide to Vue Lifecycle hooks.