DEV Community

Cover image for VueJS part 7: Lifecycle methods
Kristijan Pajtasev
Kristijan Pajtasev

Posted on • Originally published at kristijan-pajtasev.Medium

VueJS part 7: Lifecycle methods


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

Image description


This method runs before anything starts in VueJS. Think of it as some action before there is an initialization object.

At this moment, there is an initialization object, but the template is still not compiled.


This stage is when your template is compiled but it is still not shown in your browser.


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.


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.


Very similar to the beforeUpdate method, the difference is that this method runs when component data is updated and gets re-rendered.


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.


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.

Top comments (0)