DEV Community

Cover image for A guide to Vue Lifecycle hooks.
Makanju Oluwafemi
Makanju Oluwafemi

Posted on • Updated on

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.

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')
}
Enter fullscreen mode Exit fullscreen mode

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'")
}
Enter fullscreen mode Exit fullscreen mode

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")   
}
Enter fullscreen mode Exit fullscreen mode

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")
}
Enter fullscreen mode Exit fullscreen mode

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")
}
Enter fullscreen mode Exit fullscreen mode

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");
}
Enter fullscreen mode Exit fullscreen mode

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")
}
Enter fullscreen mode Exit fullscreen mode

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")
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (7)

Collapse
 
iamhectorsosa profile image
Hector Sosa • Edited

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)
}
Enter fullscreen mode Exit fullscreen mode
  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

Collapse
 
miracool profile image
Makanju Oluwafemi

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

Collapse
 
miracool profile image
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

Image description

  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.
 
miracool profile image
Makanju Oluwafemi • Edited

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

Collapse
 
miracool profile image
Makanju Oluwafemi

Hi @ekqt what do you think about the update ?

Collapse
 
nlxdodge profile image
NLxDoDge

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

Collapse
 
miracool profile image
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