Build a Modern Server-Side Rendered Vue Application with NuxtJS/

...

/

Rendering Mechanism

Rendering Mechanism

Learn how Vue’s rendering mechanism generates and updates the virtual and real DOM.

We'll cover the following...

Client-side libraries, including Vue, use the virtual DOM (VDOM) to optimize rendering. To understand VDOM, it’s helpful to first understand how the “real” DOM works.

Document Object Model (DOM)

The Document Object Model (DOM) is a tree-like structure used by web browsers to represent the structure of an HTML document. Each HTML element is represented as a JavaScript Node in the DOM, with properties that describe its behavior.

DOM node

As mentioned earlier, when the browser reads the HTML file, it creates a Node object for every HTML tag it discovers. This object contains properties that describe the element’s structure, attributes, and contents. This object’s structure makes the properties accessible and easily manipulated using JavaScript.

For example, an h2 tag element containing text “Hello World” like this <h2 class="hello">Hello World</h2> would produce a Node object similar to this:

Press + to interact
{
  "nodeType": 1,
  "tagName": "H2",
  "nodeName": "H2",
  "className":"hello",
  "nodeValue": null,
  "childList": [
    {
      "nodeName": "#text",
      "nodeValue": "Hello World",
      "nodeType": 3
    }
  ]
}

Note that the actual Node object has more properties than what is described above.

The nodeType value of 1 represents an ELEMENT_NODE, the value of 2 represents an ATTRIBUTE_NODE, while 3 represents a ...