Open In App
Related Articles

What is the difference between created and mounted event in VueJS?

Improve Article
Save Article
Like Article

VueJS is a model- view-view-model JavaScript framework for building user interfaces and single-page applications. It has several lifecycle hooks (not more than 8). In this article, we are going to differentiate two types of events that are part of the lifecycle of a component. 

  • Created
  • Mounted 

And among both of them, mounted hooks are also known as most used hooks because it is easily handled when there is no concept involved of “Server-side Rendering ” and created is more useful when we are dealing with servers and fetching data from backend API. 

Differences between Created() and Mounted() events :-

Category Created Mounted
Stage It occurs at the earliest stage of the Vue lifecycle. It occurs after the created hook is called. 
Occurrence It occurs only once in the lifecycle of component. It can occur more than once in the lifecycle of component.
Access It has access to component’s data, methods, mounting, and computer properties. You need to access (or) modify the DOM of your component immediately before (or) after initial rendering.
DOM It cannot perform DOM manipulation because event is not mounted. It can perform DOM manipulation because event is already mounted
API’S Generally, used for fetching data from backend API. In mounted, we need to perform tasks like fetching data from API in created hook only.
Mounting Phase Mounting phase is not started by this time and $el property is not available. Here, in the mounting phase, every time component is loaded to $el. 
Child Component If the component has child elements then it is certain that even child component will have created hook initialized. If component has child elements then there is no guarantee all the child components will be mounted.
Server-Side This hook is especially called when we want to read data from server. This hook is not called during server-side rendering.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 06 Jun, 2022
Like Article
Save Article
Similar Reads
Complete Tutorials