Vue.js Developers
Published in

Vue.js Developers

Vue Virtual Dom

A core feature of Vue.js and a huge factor in its performance and scalability, is taking advantage of a Virtual Dom in order to efficiently update the real DOM when needed. This happens behind the scenes during the component template rendering phase that is explained below. But before we dive right in let’s see what the DOM actually is.

The DOM

The Document Object Model (DOM) is an interface that treats an HTML document as a tree structure where each node is an object representing a part of the document. The DOM represents a document like a logical tree of nodes.

DOM methods allow programmatic access to the tree and allow us to change the structure, style or content of a document. Nodes can also have event handlers attached to them.

In a modern application, the DOM tree can be extremely big and have thousands of nodes. Searching and updating the DOM is a huge bottleneck in web application performance. This is the reason Virtual DOM is created.

Virtual DOM

Virtual DOM is a way of representing the actual DOM of a webpage with Javascript objects. Given any HTML element, we can create a Virtual Node to represent it.

Vue knows how to convert this Virtual node to a real DOM node. When virtual nodes start to change Vue compares the new and the old state and decides if the DOM needs to be updated. This process is called reconciliation. If a change is required only the associated DOM nodes will be altered with the rest of the tree to remain intact.

Now that we are familiar with the concepts of DOM and virtual DOM let’s dive into the actual template rendering process itself.

Component template rendering

Component template rendering has two steps

— Step 1 Compilation is when we compile our template to a render function

— Step 2 Running the render function that will create the Virtual DOM node which will end up on the DOM we will see in our browser

The first step only happens once and can be performed in the server for significant performance improvement. For prototyping, compilation can also be done on the client but Vue.js runtime compiler needs to be included.

The second step takes place on the client once during the component mounting lifecycle and each time the diffing algorithm decides that the template should be re-rendered.

JSX

A closer-to-the-compiler alternative to templates is using JSX as the render function. This enables us to use the full programmatic power of JavaScript for some specific edge cases that templates can satisfy. In this case, the template in the first step is replaced by the JSX render function and the rest of the workflow remains exactly the same.

Conclusion

Virtual DOM is the backbone of Vue.js performance. It consists of a javascript representation of each node in the real DOM tree. Finding the nodes that have changed in the Virtual DOM is much faster. This way we bypass the bad performance of searching and updating multiple nodes in a large scale application.

Additional Resources

--

--

--

Helping web professionals up their skill and knowledge of Vue.js

Recommended from Medium

10 Awesome Front-End Project Ideas for Code Newbies

Developer codes on her laptop.

Deconfusing JavaScript Destructuring Syntax

Implementing Associative Arrays with Hash Maps: A Look Inside JavaScript Objects

How binding data works in Svelte

Alvin’s Dew Drop Daily — Issue #49

How to become Mern Stack Development

Testing JavaScript Applications

JavaScript Control Flow & Error Handling

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Fotis Adamakis

Fotis Adamakis

Front End Engineer @ Glovo // Vue.js Athens Meetup Coorganizer

More from Medium

Custom JavaScript Transitions In Vue

Most popular Vue.js plugins & packages

3 State Management in Vue Js

Vue 3 Programmatic Component Design