Introduction and lifecycle of view in VUE.js

V
ue.js is a JavaScript library that helps you build web applications using the MVVM (Model-View-ViewModel) architectural pattern. 

Why use VUE.js?

As we know there are lot of framework in a market and it becomes really challenging to choose right framework for the project. The reason to use VUE.js is: "It is fast because of virtual DOM".

Below are the stats showing how fast VUE.js is compared to other popular frameworks like Angular or React.

 

 

Now the question comes what is virtual DOM?

DOM stands for Document Object Model. As we know HTML DOM is always tree structured which is good. Because we can traverse tree easily. Right?

But unfortunately easily doesn't mean quickly. Now with modern apps, we have 1000 of divs in DOM which is hard to manage and update. And also updating a DOM is an expensive operation.

To avoid above problem Virtual DOM comes into action.

With Virtual DOM we can easily manage and update our DOM. Virtual DOM is an abstraction of the HTML DOM that selectively renders subtrees of nodes based upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.

To understand virtual DOM even more better we can think of virtual DOM as we are creating a light weight copy of our DOM which we can change as we want and then save it to our real DOM. As simple as it sounds.

Summary: Virtual DOM is a technique which avoid direct manipulation with DOM and works with light weight javascript object which creates our DOM.

Understanding Lifecycle of view

Now, let us have a look at how exactly view is rendered on page using VUE.js. The diagram show below will help us how component is created, added to DOM, updated and finally destroyed.

 

VUE.js lifecycle

 

Now, it is clear that component can go under four stages. These are:

  1. Creation
  2. Mounting
  3. Updating
  4. Destroy

OK! Now lets have a detail look at what exactly the stages mentioned above means.

Creation

 This is the first step that run in our component. This state allow us to perform actions before adding component in DOM.

This state is further divided into three states:

  1. beforeCreate - This is state where data and events has not been created
  2. Initialize State - This is state where data and events has been initialized and are ready to be created.
  3. created - This is the state where data and event is initialized but not mounted to DOM.

Once the data and events are initialized it is ready to be complied as a template which happens in mounting state.

Mounting

This is the state which allow us to access components immediately before and after first render. In this state virtual DOM is created and mounted to DOM tree.

The state is further divided into three states:

  1. beforeMount - This is a state which is right before template rendering happens. Mostly, you wont be using this state.
  2. Create Virtual DOM - This a state where virtual DOM is created and is ready to be mounted
  3. mounted - This a state where virtual DOM is mounted to DOM tree and HTML is ready to render.

Once the virtual DOM is mounted, it is in a state where it listens for any other changes and is ready to re-render DOM.

Updating

This is a state where any updates happen and which cause DOM to re-render. 

The state is further divided into three steps:

  1. beforeUpdate - This is a state which runs once our data is updated and is ready to re-render.
  2. Re-render Virtual DOM - This is a state where the DOM is re-rendered with the updated changes that were made.
  3. updated - This is a state where updated virtual DOM is mounted to DOM tree.

destroy

If at any point requirement is to destroy the DOM and clean up the DOM this state will come into action.

This state is also further divided in to three states:

  1. beforeDestroy - This is a state where we clean up events and data before destroying them.
  2. Tear down virtual DOM - This is a state where virtual DOM is teared down and is ready to mount to DOM tree.
  3. destroyed - This  is a state where component is completely destroyed from DOm tree and nothing is left.

In upcoming blogs, I will describe the state change in action with VUE.js and we will see significance of each state.

Author Info

Tavish Aggarwal

Website: http://tavishaggarwal.com

Tavish Aggarwal is a front-end Developer working in a Hyderabad. He is very passionate about technology and loves to work in a team.

Category