VueJS created() vs mounted(), Life Cycle Hooks
Are you Still struggling with the difference between created() and mounted() life cycle hooks in VueJS, Let me show you how easy to understand they are.
Lifecycle hooks are an important part of any serious 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 start
This post is suited for all stages of developers that use Vue JS, including beginners.
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 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 initialisation. Use created (or created + activated for keep-alive components) for this instead, especially if you need that data during server-side rendering.
Conclusion:
mounted () : it will executed before creating the component.
created () : it will executed after creating the component for render.
