Life cycle Hooks of Vue JS:
Definition:
Lifecycle hooks allow you to know when your component is created, added to the DOM, updated, or destroyed. In Vue JS all lifecycle hooks automatically have this context bound to the instance, so that you can access data, computed properties, and methods.
Lifecycle hooks are a window into how the library you’re using works behind-the-scenes.
Essentially, each main Vue lifecycle event is separated into two hooks that are called right before that event and then right after. There are four main events (8 main hooks) that you can utilize in your Vue app.
Creation Hooks
Mounting Hooks
Update Hooks
Destruction Hooks
Activation Hooks
Creation — runs on your component’s creation:
beforeCreate:
Called during server-side rendering.Since the created hook is the thing that initializes all of the reactive data and events, beforeCreate does not have access to any of a component’s reactive data and events.
Called synchronously immediately after the instance has been initialized, before data observation and event/watcher setup.
Created:
Called during server-side rendering. Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, the mounting phase has not been started, and the $el property will not be available yet.
The output of this would be Value of Val is: hello because we have initialized our data.
Mounting Hooks: Runs when the DOM is mounted.
beforeMount:
Called right before the mounting begins: the render function is about to be called for the first time.
mounted:
Called during server-side rendering. Called after the instance has been mounted, where element, passed to Vue.createApp({}).mount() is replaced by the newly created vm.$el. If the root instance is mounted to an in-document element, vm.$el will also be in-document when mounted is called.
Note that mounted does not guarantee that all child components have also been mounted. If you want to wait until the entire view has been rendered, you can use vm.$nextTick inside of mounted:
Updates — runs when reactive data is modified:
beforeUpdate:
Called on the client-side.It is called when some data changes and before the DOM has been re-rendered.
Called when data changes, before the DOM is patched. This is a good place to access the existing DOM before an update, e.g. 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:
Called on the client-side
It is called when some data changed and the virtual DOM has been re-rendered and patched.
activated:
Called on the client-side.
Called when a kept-alive component is activated.
https://vuejs.org/v2/api/#keep-alive
deactivated:
Called when a kept-alive component is deactivated.This hook is not called during server-side rendering.(Called on the client-side.)
Destruction Hooks — Cleaning Things Up
beforeUnmount:
Called right before a component instance is unmounted. At this stage the instance is still fully functional.
This hook is not called during server-side rendering.
unmounted:
Called after a component instance has been unmounted. When this hook is called, all directives of the component instance have been unbound, all event listeners have been removed, and all child component instance have also been unmounted.
This hook is not called during server-side rendering.
errorCaptured:
Called when an error from any descendent component is captured. The hook receives three arguments: the error, the component instance that triggered the error, and a string containing information on where the error was captured. The hook can return false to stop the error from propagating further.
Error Propagation Rules
By default, all errors are still sent to the global config.errorHandler if it is defined, so that these errors can still be reported to an analytics service in a single place.
If multiple errorCaptured hooks exist on a component’s inheritance chain or parent chain, all of them will be invoked on the same error.
If the errorCaptured hook itself throws an error, both this error and the original captured error are sent to the global config.errorHandler.
An errorCaptured hook can return false to prevent the error from propagating further. This is essentially saying “this error has been handled and should be ignored.” It will prevent any additional errorCaptured hooks or the global config.errorHandler from being invoked for this error.
renderTracked:
Called when virtual DOM re-render is tracked. The hook receives a debugger event as an argument. This event tells you what operation tracked the component and the target object and key of that operation.
renderTriggered:
Called when virtual DOM re-render is triggered. Similarly to renderTracked, receives a debugger event as an argument. This event tells you what operation triggered the re-rendering and the target object and key of that operation.
Updating Vue 2 Code to Vue 3 Lifecycle Hooks:
This handy Vue 2 to Vue 3 lifecycle mapping is straight from the Vue 3 Composition API docs and I think it’s one of the most useful ways to see exactly how things are going to be changing and how we can use them.
beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
For many problems, multiple lifecycle hooks can work. But it’s good to know which is the best for your use case. No matter what, you should just think about it and have a good reason for choosing a specific lifecycle hook.
I hope this helped you understand a little bit more about lifecycle hooks and how to implement them in your projects.
References:
