Vue and the Virtual DOM

Lately I have been expanding my knowledge of Vue by learning a bit of how it works under the hood. The following was born out of my notes.

In order to understand how Vue works under the hood, we need to understand the Virtual DOM. And in order to understand the Virtual DOM we need to understand the DOM. So let's get started!

What is the DOM to start with?

DOM stands for Document Object Model: It's an interface between the programming code, such as Javascript, and the web page. In fact, it's an in-memory treelike data structure, where the tags (such as <div> or <header>) in the HTML document are represented as nodes and objects, programmatically.

Whoa, whoa, whoa, wait a minute! tree-like data structure? HTML document? nodes and objects? interface, even! What exactly are you talking about, Madeline?!

Let's break down some of those terms:

interface: a program which allows two systems to meet and interact with each other
tree-like data structure: a data structure is a way of organizing information/data and tree-like refers to specific way the data is organized - it is a bunch of nodes connected by edges that are related to each other hierarchically
- Here's a picture of one such data structure to make that all a bit more clear:
HTML document: a file containing hypertext markup language that uses HTML code format
node: is the basic unit of a data structure like the tree - you can see in the image of the HTML document's structure that the tags, like <html>, <body>, or <section> are nodes
object: is a data structure that associates data - for example, in the following object we get a property called name which is associated to the string "Vue" and a property called awesome which is associated to the value true
- ```
  const sampleObject = {
      name: 'Vue', 
      awesome: true 
  }
```

How does the DOM work?

Okay, so we know what the DOM is, but how does it actually work? The DOM represents the structure of the HTML document as a tree, with nodes that contain objects. There are DOM methods that can access the tree programmatically, changing its structure, which in turn changes the structure, style, or content of the DOM.

When the browser parses the HTML document, the DOM becomes available immediately. If there is a layout change to the document, the browser will paint and then repaint the DOM in the background to account for this change.

So what's wrong with this picture? Why is there a need for a Virtual DOM instead of a regular ol' DOM?

What does the Virtual DOM do?

Each paint of the DOM is costly for the browser's performance, especially at scale. That means that when there are many small updates in a row, performance will start to suffer. Enter the Virtual DOM - a virtual in-memory copy version of the actual DOM!

The concept was first seen with React, but has been implemented in varying ways by many other frameworks, including Vue. The idea is to represent the actual DOM with Javascript objects that contains all the information needed to create actual elements, while a renderer is in charge of directly manipulating the DOM.

How does this work? Here's a short list of the processes needed to make a DOM update using the Virtual DOM:

UI interactions (like clicking on a button, for example) tell Vue what state a certain element should be in
Vue triggers the Virtual DOM to update the object that represents that element to the according shape
Vue communicates to the actual DOM to perform the accurate updates to the node that is of that element accordingly

One benefit of using a Virtual DOM is that it abstracts away the direct manipulation of the DOM for the programmer and allows them to work on UI changes declaratively. The Virtual DOM also optimizes the app's performance at runtime, meaning changes load and appear faster than directly calling the DOM's APIs every time a change needs to occur.

Why is this faster?

At the end of the day, the Virtual DOM is just a tree of custom Javascript objects. Updating a Javascript object doesn't take very long. We don't actually call a DOM API yet, so this process doesn't trigger a DOM repaint. Then the Virtual DOM syncs in batch with the actual DOM, causing the changes to the browser.

The Virtual DOM is more efficient because it tracks the specific updates that need to be synced with the DOM when modifying the Virtual DOM, but doesn't query and update the DOM itself. Instead if schedules and calls the updated API with a singe render function. This results in just one update cycle instead of many.

Thanks

Thank you for sticking with me through this explanation of how the Virtual DOM works with Vue! I am still learning these concepts myself, so if you see anything here that seems to be amiss, please feel free to let me know in a comment. Until next time!

Resources

If you enjoyed this introduction to the DOM/Virtual DOM and would like to know more, check out the following resources.

On the DOM:

On the Virtual DOM:

https://vuejs.org/guide/extras/rendering-mechanism
Learning Vue by Maya Shavin, Chapter 2, pgs 13-18