Life Cycle Hooks in Different Stages of VueJS Lifespan

VueJS instance forms the core of this programming language. Whenever a VueJS application is created, a new object is created in the instance that helps a developer to build desired behavior. It consists of various options like templates, methods, props, watchers, lifecycles, data and many other things. It is the life cycle stage that enables developers to add codes in their applications depending on the stages. The four different stages in VueJS life cycle are:

• Creating 
• Mounting    
• Updating
• Destroying

Each Vue instance holds a new object that is required to go through some steps to initialize it. The life cycle of an instance is a process of creating an observation data setup, template compilation, DOM mounting, and eventually to DOM updating. It consists of some functions by default as they go through this process where various components of Vue take birth and stay till their destruction. These components are known as lifecycle hooks and are:

• beforeCreate    
• created    
• beforeMount
• Mounted
• beforeUpdate
• Updated    
• beforeDestroy    
• destroyed

For attaining a clear idea of how all these Hooks work, take a look upon all the related examples for each stage.

Life Cycle Hooks of VueJS

VueJS development services include a variety of methods to develop different applications. Following is a brief description of one of these methods called life cycle hooks, work while creating a new object in Vue instance:

Creation Stage

Actions can be performed even before the addition of a component under this method. The two hooks falling under this stage are beforeCreate and created.

BeforeCreate is a process of creating a new object and it’s represented by a new method. Such a method creates an object of Vue class that specifically deals with Dominant Object Model (DOM) elements. Here, developers can insert the code in this hook that is executable before initialization of an object.

Created, is that phase where objects are initialized where developers can get access to this phase and start writing code for developing mobile applications. Since the process of creating an instance is completed, reactivity, methods, properties, event callbacks and watchers are also set up. However, interaction with DOM isn’t yet possible and it also lacks element property because it isn’t mounted yet.

Mounting Stage

Mounting stage is used for modifying the components of DOM as soon as the initial rendering is completed. However, it is usually not advisable to use this method for server-side rendering and “created” methods are preferred instead. The two hooks of this stage are – beforeMount and Mounted.

The hook beforeMount verifies the availability of any template in the DOM rendered object. If there is no template, outer HTML layer of the rendered element is considered. However, even after compiling scoped styles DOM can’t be maneuvered yet and it also isn’t guaranteed that the addition of element property to DOM is completed. Hence, all the unnecessary initialized objects in components would go into it.

Mounted hook is the phase where the DOM element gets replaced with new data element to create a renderable element. Root instance and vm.$el are both simultaneously present in the in-document element. Since the element property is now available by replacing the DOM element, it can be now manipulated and any component of the app is now functional.

Updating Stage

Updating stage consists of beforeUpdated and updated hooks and are pretty beneficial for debugging, a change in the component’s reactive state, or re-rendering occurs.

BeforeUpdate is the phases used by developers to bring changes in the data or updating DOM before patching. The hook is a great way to check the DOM that already exists before its updated by adding or removing any events. This hook isn’t called while rendering the server side.

Updated hook is the phase used by developers after the changes have been introduced in the element property. The DOM is also updated under this hook and operations dependent on DOM can now be performed. However, changing the element state inside hook should be avoided and it’s better to use watchers and computed properties instead.

Destroying Stage

This is the last stage completing the life cycle by destruction method. Developers are now able to perform cleanup actions for building a responsive web design when certain components of a rendered element are removed.

BeforeDestroy hook is the first hook that is applied before the destruction of the components of a rendered element. The hook is fired up exactly before destroying the object to clean it up from Vue memory. It enables the developers to handle custom code, as it’s still functional and they can now manage resources, remove variables etc.

Destroyed hook gets fired up after the destruction of the instance. However, the DOM code won’t be removed from it, instead it will delete all the JavaScript logic. This results in the non-existence of the Vue instance. After this, the object is removed from memory, the directives are unbound and event listeners are also deleted.

ErrorCaptured Hook

VueJS introduced a new Lifecycle hook method in its version 2.5.0, errorCaptured. It enables the developers in dealing with an error that is specific to a component within itself. It is called when the hook captures an error from any previous component. It displays three actions: error, the object or component due to which the error occurred, and information regarding the place or stage where error was detected. The hook can come up with “false” in order to put brakes on the concerned error and stop it from trailing into further components. Hence, this hook isn’t accessible from main rendered object, instead from a “parent” component that has “child”.

Client-side Rendering Lifecycle Hooks

Activated Hook

Activated hook is used especially for the components in keep-alive template. It’s very beneficial for developers to keep the state of a component exactly as it is even after switching to another one. Whenever keep-alive template is toggled with a component, activated and deactivated hooks get switched on.

Deactivated Hook

As explained in the previous hook, deactivated hook is also used for keeping alive the components of that template. This hook is used to determine when a component of this template is switched off.

Ending Notes

The lifecycle hooks for various stages in Vue offer great advantages to developers while adding custom codes in specific stages. They assist in controlling, updating and deleting and object while it is rendered in DOM. Developers can visualize the workflow better and initialize their components when and how they want. For more in-depth details, you can always check out Vue documentation for different methods and properties.