Vinay Kumar Singh
Life cycle Hooks of Vue JS:
Last updated 
October 11, 2021
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 their 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.
Creation Hooks
Mounting Hooks
Update Hooks
Destruction Hooks
Activation Hooks
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.
Discussion with @Amardeep regarding the MO Text and int flag of pullcollection.
Made changes in Dubai pullrequest:Changes in insertInRedis function and remove unneccessary code of writedata of redis and changes in error messgae of SMSRouter file related to dispatched job
Changes for the orcale connction:Remove all the code of oracle connection related function such as getCountryCode,getOperatorIdBySmsc,getEnterpriseId and so forth.
Update the connectionDetails property file of pullrequest for the pullrequest:Dubai Build on local server and changes in exception messgage as well.
Update error messgae of SMSRouter file related to dispatched job
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.
export default {
data() {
return {
val: ‘hello’
}
},
beforeCreate() {
console.log(‘Value of val is: ‘ + this.val)
}
}
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.
export default {
data() {
return {
val: ‘hello’
}
},
created() {
console.log(‘Value of val is: ‘ + this.val)
}
}
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:
mounted() {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
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.
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