Vue.js is a javascript framework that is used in building static as well as dynamic webpages and User Interfaces. It offers many lucrative features for developers to use. For example, virtual DOM, component architecture, directives, templates, event binding, and many more.
Document Object Model (DOM) is a tree-like representation of a webpage that treats every node as a javascript object, that depicts the part of the document. The DOM indicates the document as a logical tree of the node. It gives us various methods to alter the structure of the tree, create, update, or remove the existing nodes, or even add custom events or event listeners to the HTML elements.
Example of DOM:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>
Default code has been
loaded into the Editor.
</p>
</body>
</html>
Tree representation for the above code:
Virtual DOM is a lightweight representation of the DOM of a webpage with the help of javascript objects. Every HTML element can be represented as its virtual DOM counterpart. For example:
HTML node:
<h2>Welcome To GFG</h2>
Virtual DOM node:
{
"tag": "h2",
"children": {
"text": "Welcome To GFG"
}
}
Some javascript libraries and frameworks, for instance, vue or react, use the concept of Virtual DOM to make any changes to the real DOM. This is because when the DOM is large and has many nodes present, the operation to change or update the DOM tree becomes very expensive. And so, in order to avoid this, VDOM came into the picture, as it helps us to only update that part of the real DOM which underwent any changes, keeping the rest of the real DOM intact.
How does Virtual DOM Works?
Vue.js uses a reconciliation technique to update the real DOM. With the help of various diff algorithms, vue.js determines whether virtual DOM differs from the real DOM, and then updates only that part of the real DOM that is different from the virtual DOM.
Example 1: This example describes the creation of a Virtual DOM in Vue.js.
HTML
<!DOCTYPE html> <html> <head> <title>VueJS DOM Tree</title> <script src= </script> </head> <body> <h2>neveropen</h2> <p>This is VueJS DOM tree Example</p> <div id="app"> </div> <script> new Vue({ el: '#app', data: { text: 'Hello World' }, render(createElement) { return createElement('h1', { attrs: { id: 'headers' } }, this.text); } }); </script> </body> </html> |
DOM representation:
Output:
In the script tag, we create a new element, “h1”, with content as “Hello World”. We then insert the element inside the “div” tag with the id “app”. Upon render, the Vue.js code returns the following HTML element:
Vue.js virtual DOM creates the corresponding HTML element on the real DOM:
<div id="app">
<h1 id="headers">Hello World</h1>
</div>
From the above example, we can see that the VDOM in vue.js extends the vue.js instance and is essentially composed of javascript objects.
Example 2: This example illustrates rendering the content by clicking the button.
HTML
<!DOCTYPE html> <html> <head> <title>VueJS DOM Tree</title> <script src= </head> <body> <h1 style="color: green">neveropen</h1> <h3>Vue.js DOM tree</h3> <div id="app"> <button @click="clickHandler"> Click me </button> <p v-if="text.length > 0"> {{text}} </p> </div> <script> new Vue({ el: '#app', data: { text: '' }, methods: { clickHandler() { this.text = "Welcome to the neveropen Learning" } }, }); </script> </body> </html> |
In the above code:
- Here, on the initial render of the webpage, we will see a button, saying “Click me”, but there will be no text under it.
- Now, when the button is clicked, the <p> tag gets displayed under the button.
- The vue.js VDOM state changes when the button is clicked, meaning the text variable changes from being an empty string “” to “Welcome to the neveropen Learning”.
- A diff algorithm then compares the VDOM state to the state of the real DOM, and renders only the <p> tag, instead of re-rendering the whole DOM.
Output:
