A guide to Vue Lifecycle hooks.

Originally published by me miracool.hashnode.dev

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.

• State options: https://vuejs.org/api/options-state.html

• Vuex: https://vuex.vuejs.org/

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

1. beforeCreate

2. created

3. beforeMount

4. mounted

5.beforeUpdate

1. updated

2. beforeUnmount

3. 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.

Comments

[Hector Sosa]

Hi, @miracool ! Great post! The content is great but if I may suggest a couple of pointers?

1. Use inline code for your hooks. It would like cleaner and it's a bit distracting for the OCD folks out there to see titles in lowercase. i.e. beforeCreate looks better than just "beforeCreate".
2. Write the programming language that fits best in your code blocks. This allows for syntax highlighting and it's easier for your readers to understand the code snippet.

function printToConsole(value: string){
  console.log(value)
}

1. Final one, images are always great to engage audience. If you need a tool to help you with your screenshots. I've built a simple OSS for this. Check it out and let me know what you think! github.com/ekqt/screenshot I'd appreciate if you give it a star if you find it useful!

Cheers

[Makanju Oluwafemi]

Thanks for the review, sure will improve in my next post.

[Makanju Oluwafemi]

1. First thing, are you a vue developer?

2. Can you take a look at this yourself.

You can as well verify from vue docs yourself

1. You don't just come online and critise people without providing a valuable alternative or explaining what to improve. seems you know too much and it's a problem for you.

2. You should read @ekqt sosa comment and learn from it. you really need to going forward.

5 Btw, this article was written way back by me on hashnode, when i started technical writing. I just cross-post it here

1. Thanks for the reply also.

[Makanju Oluwafemi]

Apparently, the way you use them is going to be different, it's composition api and not option. the use case i meant was the end result which i'm quite sure will be the same.

And between if you understand his question, he said is this the same with option API and not composition API

[Makanju Oluwafemi]

Hi @ekqt what do you think about the update ?

[NLxDoDge]

I worked with the composition API, but is this 100% the same for the older options API as well?

[Makanju Oluwafemi]

I think it is. However , there might be a little bit of modification in the syntax but the use cases are still going to be the same