0 votes
in VueJS by

What is the Virtual DOM?

2 Answers

0 votes
by
edited by

The Document Object Model or DOM defines an interface that allows languages such as JavaScript to access and manipulate an HTML document. Elements are represented by nodes in a tree and the interface allows us to manipulate them. This interface, however, comes with a cost and a large number of very frequent DOM operations will slow down the page.  

Vue solves this problem by implementing a virtual representation of the document’s structure in memory where a virtual node (VNode) represents nodes in a DOM tree. When manipulation is needed, instead of performing it on the real DOM, the calculations and operations are performed in memory on the Virtual DOM. This is naturally faster and allows the Virtual DOM algorithm to compute the most optimised way to update the actual DOM structure. 

Once this computed, it is applied to the actual DOM tree. This boosts performance and is the reason why Virtual DOM based frameworks such as Vue and React have gained so prominence. 

0 votes
by

The Virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is kept in memory and synced with the "real" DOM. It's a step that happens between the render function being called and the displaying of elements on the screen. This entire process is called reconciliation.

Related questions

0 votes
asked Oct 28, 2023 in ReactJS by DavidAnderson
0 votes
0 votes
asked Dec 8, 2020 in ReactJS by SakshiSharma
...