Vue js lifecycle hooks for dummies

What are lifecycle hooks?

Every component in VueJS has a lifecycle which is being managed by Vue itself when it creates the component, mounts the component to the DOM, updates the component and destroy the components.

Just like Humans have a lifecycle (birth , growing up , death etc) We can tap into key moments in that lifecycle by implementing one or more lifecycle hooks giving us the opportunity to add our own code at specific stages of a component lifetime.

for the sake of this article, we will consider a Vue component as a package that will contain HTML / CSS / JS

- beforeCreate()

Our package is now being filled with events/watchers setups and data.

Explanation : Inside this hook, data is still not reactive and events that occur during the component’s lifecycle have not been set up yet.
we can not use any Data/ Methods from the Component, however you can access props.

- Created()

Our package is finally filled with reactive data , computed properties, methods, watch/event callbacks.

Explanation : Data is now reactive and events have been set up You cannot do any DOM manipulations because DOM has not been mounted yet. created() is called earlier in order to trigger actions like data fetching from API backend.

Created will not wait for all of the async operations to complete before moving on to the next stage when making API call.

- BeforeMount()

the package is on it's way to our depot "The Dom"
Explanation : the render function is being called for the first time , our template has been compiled and our virtual DOM updated by Vue.

This hook is not called during server-side rendering.

- Mounted()

the package is now stored in the depot "THE DOM" and have access inside the dom.

Explanation : with this hook you can access or modify the DOM of your component immediately before or after the initial render.
The Vue docs recommend using the mounted() hook over the created() hook for data fetching.
Vue does not block rendering until the mounted function is done running, so mounted() runs concurrently with axios .

This hook is not called during server-side rendering.

- beforeUpdate()

the package content is being changed, so it's back to our factory and not accessible to "the DOM" depot anymore.

Explanation : this hook is called when data changes, but the DOM hasn't changed yet.
The Vue Docs recommends using this hook to remove manually added event listeners.

This hook is not called during server-side rendering, because only the initial render is performed server-side.

- Updated()

the package content is back to "the DOM" depot after the changes.

Explanation : Updated() is called when there is some data changes that causes the DOM to be re-rendered and patched. This hook is mostly for changes related to the DOM. It is not recommended updating the state with this hook. It's better to use computed property or Watchers to react to state changes.

This hook is not called during server-side rendering, because only the initial render is performed server-side.

- unmounted()

we no longer need the package and it's going straight to the trash.

Explanation : all directives of the component instance have been destroyed. This is the last step in the component lifecycle, it is similar to death .

This hook is not called during server-side rendering

If you ever feel lost about Vue JS lifecycle hooks you can have a look at the lifecycle diagram