Rendering Mechanisms and Optimizations

Understanding Virtual DOM

While the HTML DOM is beneficial, it comes at a high cost. The re-rendering of the HTML DOM upon updation is costly as it takes a lot of time. Therefore a representation of the HTML DOM is used to perform addition, modification, and deletion operations. This representation of the real DOM is called a Virtual DOM.
The advantage of using a Virtual DOM is that they minimize the updation cost of the real DOM, and it is easy to mount to a traditional HTML DOM.Vue’s Virtual DOM contains Vue components that are extensions of Vue instances.
Let us consider a case where we have a table with data elements and a next button that renders new table data. Therefore, when the next button is pressed, the entire data elements are deleted in the DOM, and the new elements are re-rendered. However, when a Virtual DOM is used, the real DOM is not changed.
In Vue, the Virtual DOM is created by the render function. The render function takes three arguments: the element, an object with data, props, attributes, and more, and an array. The array contains children who have all these arguments, and then they can have children until we build a tree of elements.

export default function render()
return (openBlock(), createBlock(
"div", //element
{}, //state, props, style, attrs
[...] //children
[
createTextVNode( "This is a sample "),
createVNode( "ul", [
createVNode( "li", "Item Number 1" ),
createVNode( "li", "Item Number 2" )
]),
createTextVNode( "This is end of list")
]
))
}

You can also try this code with Online Javascript Compiler

Run Code

The Virtual DOM offers the ability to control the timing at which the Virtual DOM is rendered. The HTML DOM will completely re-render the same data, while the Virtual DOM will maintain the state of the data without re-rendering the data if you choose not to reload the Virtual DOM. Also, Vue’s Virtual DOM  allows us to optimize a web application’s performance by minimizing the number of times the DOM has to be updated.

Also see,Queryselectorall

FAQs

1. What is Vue Virtual DOM?
   A Virtual DOM is a lightweight copy of the real DOM with the added benefit of fast rendering processes. Also, the Virtual DOM has extended behavior, meaning that the DOM elements extend from Vue’s instance.
    
2. How is Virtual DOM faster than traditional DOM?
   Virtual DOM does not change the real DOM. Instead, it re-renders itself and displays to the website.

Key Takeaways

In this article, we learned about Vue’s rendering mechanism using Virtual DOM and how it reduces the costly re-rendering process of the HTML DOM. We also learned how the DOM is used to trigger changes in a document. However, this isn’t enough, as there is always much more to explore and learn about this vast field of Web Development. To know more about Vue and its intricacies, check out the articles on Vue or enroll in our highly curated Web Development course.