The problem: touching the real DOM is expensive. Every time you change something in it, the browser has to recalculate layout and repaint parts of the screen. If you're making dozens of small changes, doing each one directly means dozens of expensive recalculations, one after another.
If every one of those updates means directly touching the real DOM, performance falls apart fast. So the core idea became: don't touch the real DOM directly for every small change. Instead, keep an in-memory copy, compute what actually needs to change, and only then touch the real DOM — and only for the parts that actually changed.
That in-memory copy is the Virtual DOM.
Old Virtual DOM ──┐
├──► diff ──► minimal set of real DOM updates
