Created or Mounted? Explanation of Lifecycle Hooks in VueJs

If you have just started to learn VueJs or you are already a little bit familiar with its structure, you might have heard about the lifecycle hooks. But how can we use them and what is their meaning? Let me explain to you.

If you reading this article, that means that you already have some basic knowledge of JavaScript and you are into learning a framework. I hope this is the case because it wouldn’t be a good idea to skip a JavaScript course before jumping into a framework.

In this article, we will talk about how actually can we understand lifecycles in VueJs and how we can probably use them.

First of all, if you want to understand well the lifecycles meaning, you have to know what DOM is.

What are the lifecycles?

Well, the name of it talks for itself.

Let’s take a simple example and imagine a simple HTML page and take a look at its “life”.

First, when we open the website, the page has been created (its domain and all its inner structure). Then, its elements appear (all the divs, paragraphs, and actually anything we see on the page).

The page can be updated as well, we can change something on it, add a file or fill out a form. The page can be also…