Virtual DOM and diffing mental model in Vue - Step-by-Step Execution

Concept Flow - Virtual DOM and diffing mental model

Initial Render

↓

Create Virtual DOM Tree

↓

Render Real DOM from Virtual DOM

↓

State or Props Change

↓

Create New Virtual DOM Tree

↓

Diff Old and New Virtual DOM

↓

Calculate Minimal DOM Updates

↓

Apply Updates to Real DOM

↓

User Sees Updated UI

The app first creates a virtual DOM tree, renders it to the real DOM, then on changes creates a new virtual DOM, compares it with the old one, and updates only what changed in the real DOM.

Execution Sample

Vue

const oldVNode = { tag: 'div', children: ['Hello'] };
const newVNode = { tag: 'div', children: ['Hello Vue'] };

// Diff function compares oldVNode and newVNode
// Updates only changed text in real DOM

This code shows two virtual DOM nodes before and after a change, illustrating how diffing detects text changes to update the real DOM efficiently.

Execution Table

Step	Action	Old Virtual DOM	New Virtual DOM	Diff Result	Real DOM Update
1	Initial render	{div: ['Hello']}	{div: ['Hello']}	No diff needed	Render <div>Hello</div>
2	State changes	{div: ['Hello']}	{div: ['Hello Vue']}	Text changed	Update text to 'Hello Vue'
3	Apply update	{div: ['Hello']}	{div: ['Hello Vue']}	Apply minimal update	Real DOM text updated
4	No further changes	{div: ['Hello Vue']}	{div: ['Hello Vue']}	No diff needed	No DOM update

💡 No more changes, virtual DOM matches real DOM, update stops

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
oldVNode	{div: ['Hello']}	{div: ['Hello']}	{div: ['Hello']}	{div: ['Hello']}	{div: ['Hello Vue']}
newVNode	undefined	{div: ['Hello']}	{div: ['Hello Vue']}	{div: ['Hello Vue']}	{div: ['Hello Vue']}
Real DOM	<empty>	<div>Hello</div>	<div>Hello</div>	<div>Hello Vue</div>	<div>Hello Vue</div>

Key Moments - 2 Insights

Why does Vue create a new virtual DOM tree instead of updating the real DOM directly?

Vue creates a new virtual DOM tree to compare it with the old one and find the smallest changes. This diffing process (seen in execution_table step 2) helps update only what changed, making updates faster and smoother.

What happens if the virtual DOM trees are identical after a state change?

If the virtual DOM trees are identical (execution_table step 4), Vue skips updating the real DOM because no changes are needed, saving processing time and avoiding unnecessary re-rendering.

Visual Quiz - 3 Questions

Look at the execution table at step 2. What change does the diff detect?

A Text content changed from 'Hello' to 'Hello Vue'

B Tag changed from 'div' to 'span'

C Children array length changed

D No changes detected

💡 Hint

Check the 'Diff Result' column at step 2 in the execution_table

At which step does the real DOM get updated with new text?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Real DOM Update' column to find when the text changes

If the new virtual DOM had an extra child element, how would the diff result change?

A No diff needed, same as before

B Diff only updates text content

C Diff detects added child and updates real DOM accordingly

D Diff replaces entire DOM tree

💡 Hint

Consider how diffing detects changes in children arrays in the execution_table

Concept Snapshot

Virtual DOM is a lightweight copy of the real DOM.
Vue creates a new virtual DOM on state changes.
It compares old and new virtual DOM (diffing).
Only minimal changes update the real DOM.
This makes UI updates fast and efficient.

Full Transcript

Virtual DOM is a concept where Vue keeps a lightweight copy of the real DOM in memory. When the app first renders, Vue creates this virtual DOM tree and renders it to the real DOM. When data changes, Vue creates a new virtual DOM tree and compares it with the old one. This comparison is called diffing. The diffing process finds the smallest changes needed. Vue then updates only those parts in the real DOM. This approach makes updates faster and smoother because it avoids re-rendering the entire UI. The execution table shows how Vue detects text changes and updates the real DOM accordingly. If no changes are found, Vue skips updates to save work. Understanding this flow helps beginners see why Vue is efficient and how it manages UI updates behind the scenes.