What is Virtual DOM?

Virtual DOM is a lightweight JavaScript representation of the real DOM. Vue (like React) uses the Virtual DOM to update the interface efficiently, minimizing the number of operations on the real DOM.

In simple terms:

The Virtual DOM is a copy of the DOM in memory that lets the framework calculate what needs to be updated and what doesn't need to be touched.

---

#Why is the Virtual DOM needed?

The real DOM is very slow for frequent changes. Every operation triggers:

• a repaint
• a style recalculation
• a size recalculation
• a layout repaint

The Virtual DOM solves this:

1. Vue generates a virtual tree (JS objects)
2. When data changes, Vue creates a new virtual tree
3. Vue compares the old and new trees (diffing)
4. It applies the minimum necessary changes to the real DOM

---

#What does this look like?

#There was a state -> virtual tree A

The data changed -> virtual tree B

Vue:

1. compares A and B
2. finds the differences
3. updates the DOM only where needed

---

#A small example (simplified)

#Old virtual tree

#New virtual tree

Vue understands that only the text node changed, so it updates only the text.

Without the Virtual DOM, the whole <p> would have to be repainted.

---

#Main advantages of the Virtual DOM

#1. Minimal operations on the real DOM

This is what makes the interface fast.

#2. Update optimization through the diff algorithm

Vue updates only the parts that changed.

#3. Easier to think about the UI as a function of data

UI = f(state), and Vue updates the DOM itself as needed.

#4. Portability

Rendering isn't limited to the browser:

• SSR (Server-Side Rendering)
• NativeScript
• Weex
• canvas, and so on.

Because the Virtual DOM is an abstraction.

---

#Downsides of the Virtual DOM (often asked about!)

• not faster than handwritten DOM operations
• diffing still requires computation
• an extra layer of abstraction

But in 99% of cases the benefits outweigh the downsides.