Rendering / 01

Virtual
DOM

The Virtual DOM is a lightweight JavaScript description of the UI. Vue compares the new description with the old one before touching the browser DOM.

Foundationsintermediate

INTERACTIVE MODEL ● READY

inputtemplate

processdiff

outputDOM

simulator idle

01 / GET THE FEEL

The real-world analogy

Instead of rebuilding a room from scratch, you compare two floor plans and carry only the furniture that actually moved.

The editable example

Start with the smallest useful shape. Change a line, then compare it with the visual model above.

VirtualDOM.vueEDITABLE

010203040506070809

client-side example

What this teachesLIVE MODEL

state → effect

computed 0

Edit the starter on the left. This preview is intentionally tiny so the relationship stays clear.

The sequence

01Create a VNode tree

02Compare it to the previous tree

03Find the smallest differences

04Patch the real DOM

05Browser paints the result

Watch for these

Thinking the Virtual DOM is always faster

Using unstable list keys

Assuming every state change means a full DOM rewrite

Performance note

Stable keys and predictable component boundaries help Vue make smaller patches and avoid unnecessary work.