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
beforeCreate
created
beforeMount
mounted
5.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.
Top comments (7)
Hi, @miracool ! Great post! The content is great but if I may suggest a couple of pointers?
beforeCreate
looks better than just "beforeCreate".Cheers
Thanks for the review, sure will improve in my next post.
First thing, are you a vue developer?
Can you take a look at this yourself.
You can as well verify from vue docs yourself
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.
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
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
Hi @ekqt what do you think about the update ?
I worked with the composition API, but is this 100% the same for the older options API as well?
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