Are you Still trying to find out the difference between created() and mounted() life cycle hooks in VueJS, Let me illustrate to you how simple to understand these two things.

Lifecycle hooks are an important part of any component. You often need to know when your component is created, added to the DOM, updated, or destroyed. Lifecycle hooks are a window into how the library you’re using works behind the scenes.

Before you began

This post is suited for all stages of developers that use Vue JS, including new freshers.

Lifecycle hooks

Every Vue instance goes through a series of initialization steps. When it is created from setting up data observation to compiling the template, to mounting the instance to the DOM and finally to updating the DOM during data changes. This process is known as the lifecycle of a Vue instance and they have some functions run inside them by default as they go through this process of creating and updating the DOM. It is inside them that Vue components are created and exist, these functions are called lifecycle hooks.

Lifecycle Diagram

Below is a diagram for the instance lifecycle. You don’t need to fully understand everything going on right now, but as you learn and build more, it will be a useful reference.

created()

In the created hook, you will be able to access reactive data and events that are active. Templates and Virtual DOM have not yet been mounted or rendered.

mounted() (DOM Insertion)

Mounting hooks are often the most-used hooks. They allow you to access your component immediately before and after the first render. They do not, however, run during server-side rendering.

Use if: You need to access or modify the DOM of your component immediately before or after the initial render.

Do not use if: You need to fetch some data for your component on initialization. Use created (or created + activated for keep-alive components) for this instead, especially if you need that data during server-side rendering.

You can read our other blog about how to make authentication in laravel 9

Conclusion:

created(): it will be executed before creating the component.

mounted(): it will be executed after creating the component for rendering.