What is the difference between created and mounted event in VueJS?
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, zambiatek 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!
