Introduction
Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. Every application and component has its lifecycle, and quite often it happens that we need to do something during some specific stage. That is why there are lifecycle methods. Functions that are executed in the specific stages of the application. In this post, I am covering which lifecycle stages of Vue are, and which methods you can use to access them.
Vue Lifecycle
beforeCreate
This method runs before anything starts in VueJS. Think of it as some action before there is an initialization object. created
At this moment, there is an initialization object, but the template is still not compiled.
beforeMount
This stage is when your template is compiled but it is still not shown in your browser.
mounted
At this stage, the template has been compiled and shown in your browser. The moment that happens, this method gets triggered. This might be a place you might trigger if you need to access some HTML element from your component.
beforeUpdate
With the change of data, components do get changed. And if you want to take some action on it but before it gets re-rendered, this is a place to do it.
updated
Very similar to the beforeUpdate method, the difference is that this method runs when component data is updated and gets re-rendered.
beforeUnmount
Sometimes, components will get removed from your DOM. But you might want to do some cleanup tasks before such thing happens like clearing times. When the removing process starts, but before the component gets removed, this is the method that gets triggered.
unmount
Finally, the last step of the lifecycle is the unmount method. It runs once the component is completely removed from the DOM.
The code used in this article can be found in my GitHub repository.
For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.