Introduction and lifecycle of view in VUE.js
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.
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.
Now, it is clear that component can go under four stages. These are:
OK! Now lets have a detail look at what exactly the stages mentioned above means.
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:
- beforeCreate - This is state where data and events has not been created
- Initialize State - This is state where data and events has been initialized and are ready to be created.
- 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.
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:
- beforeMount - This is a state which is right before template rendering happens. Mostly, you wont be using this state.
- Create Virtual DOM - This a state where virtual DOM is created and is ready to be mounted
- 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.
This is a state where any updates happen and which cause DOM to re-render.
The state is further divided into three steps:
- beforeUpdate - This is a state which runs once our data is updated and is ready to re-render.
- Re-render Virtual DOM - This is a state where the DOM is re-rendered with the updated changes that were made.
- updated - This is a state where updated virtual DOM is mounted to DOM tree.
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:
- beforeDestroy - This is a state where we clean up events and data before destroying them.
- Tear down virtual DOM - This is a state where virtual DOM is teared down and is ready to mount to DOM tree.
- 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.