Vue Js Lifecycle Hooks

Hello everyone, I will tell you about Vue Js Lifecycle and lifecycle hooks. Every system has a life cycle. It is created, updated, and finally exited from that cycle. Vue Js also has a lifecycle and there are hooks to connect to these lifecycles and run functions there, these are lifecycle hooks.

These hooks can be shown in the diagram as follows.

I will tell you about the hooks used in Composition API. These are:

🪝onBeforeMount()

The onBeforeMount hook occurs just before the component is mounted to the DOM. The onBeforeMount lifecycle hook happens right before the onMounted hook.

Type:

🪝onMounted()

The onMounted hook is the function that will be called when the component is added to the DOM.

Type:

🪝onBeforeUpdate()

The onBeforeUpdate hook is called whenever there is a change in the data of a component, but before the update is rendered to the screen. The onBeforeUpdate lifecycle hook happens right before the onUpdated hook.

Type:

🪝onUpdated()

The onUpdated hook is called when the component updates the Dom tree.

Note: This hook is called after any DOM update of the component, which can be caused by different state changes because multiple state changes can be batched into a single render cycle for performance reasons. If you need to access the updated DOM after a specific state change, use nextTick() instead. (https://vuejs.org/api/composition-api-lifecycle)

Type:

🪝onBeforeUnmount()

The onBeforeUnmount lifecycle hook is called just before a component is removed from the DOM.

When this hook is called, the component instance is still fully functional.

Type:

🪝onUnmounted()

Registers a callback to be called after the component has been unmounted.

This hook can for example be used to remove event listeners or cancelling timers or intervals.

Type:

I can add this as a note. These hooks are not called during server-side rendering.

In general, these are the hooks and features for Composition API, I hope this was useful to you.

See you in the next writing.