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.

Practice

1. What is the main purpose of the Virtual DOM in Vue?

easy

A. To store user data permanently

B. To replace the entire webpage on every change

C. To update only the parts of the page that changed

D. To handle server requests

Solution

1. Step 1: Understand Virtual DOM role

   The Virtual DOM is a lightweight copy of the real DOM used to track changes efficiently.

2. Step 2: Identify update behavior

   Vue uses the Virtual DOM to update only changed parts, not the whole page, improving speed.

3. Final Answer:

   To update only the parts of the page that changed -> Option C

4. Quick Check:

   Virtual DOM updates changed parts only [OK]

Hint: Virtual DOM updates changed parts, not everything [OK]

Common Mistakes:

• Thinking Virtual DOM replaces the whole page
• Confusing Virtual DOM with data storage
• Believing Virtual DOM handles server requests

2. Which of the following is the correct way Vue compares old and new Virtual DOM trees?

easy

A. By deep cloning the entire DOM every time

B. By manually updating each DOM element

C. By reloading the page to refresh the DOM

D. By using a diffing algorithm to find changes

Solution

1. Step 1: Identify Vue's comparison method

   Vue uses a diffing algorithm to compare old and new Virtual DOM trees efficiently.

2. Step 2: Eliminate incorrect methods

   Deep cloning or reloading the page is inefficient and not how Vue works; manual updates are impractical.

3. Final Answer:

   By using a diffing algorithm to find changes -> Option D

4. Quick Check:

   Vue uses diffing algorithm [OK]

Hint: Vue uses diffing to spot changes fast [OK]

Common Mistakes:

• Thinking Vue reloads the whole page
• Believing Vue clones the entire DOM every time
• Assuming manual DOM updates are needed

3. Given this Vue component snippet, what will Vue update in the real DOM after changing count from 1 to 2?

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(1)
</script>

medium

A. The entire <div> element is replaced

B. Only the text inside <p> is updated

C. The button element is replaced

D. Nothing changes in the DOM

Solution

1. Step 1: Identify changed data binding

   The count variable changes from 1 to 2, affecting only the text inside <p>.

2. Step 2: Understand Vue's update scope

   Vue's Virtual DOM diffing updates only the text node inside <p>, not the whole <div> or button.

3. Final Answer:

   Only the text inside <p> is updated -> Option B

4. Quick Check:

   Text inside <p> updates only [OK]

Hint: Only changed text nodes update, not whole elements [OK]

Common Mistakes:

• Thinking entire <div> is replaced
• Assuming button updates on count change
• Believing no DOM changes happen

4. Consider this Vue code snippet:

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
const items = ref([
  { id: 1, text: 'A' },
  { id: 2, text: 'B' }
])

// Later update
items.value = [
  { id: 2, text: 'B' },
  { id: 1, text: 'A' }
]
</script>

What problem might Vue face during the update?

medium

A. Vue will reorder the list efficiently using keys

B. Vue will recreate both <li> elements causing flicker

C. Vue will throw a runtime error due to duplicate keys

D. Vue will ignore the update and keep old order

Solution

1. Step 1: Analyze key usage in v-for

   Each <li> has a unique :key based on item.id, which helps Vue track elements.

2. Step 2: Understand Vue's diffing with keys

   Vue uses keys to reorder DOM nodes efficiently without recreating them.

3. Final Answer:

   Vue will reorder the list efficiently using keys -> Option A

4. Quick Check:

   Keys enable efficient reordering [OK]

Hint: Unique keys help Vue reorder without recreating [OK]

Common Mistakes:

• Thinking Vue recreates all elements on reorder
• Believing duplicate keys cause errors here
• Assuming Vue ignores changes without reload

5. You have a Vue component rendering a list with this code:

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
const items = ref([
  { id: 1, text: 'Apple' },
  { id: 2, text: 'Banana' },
  { id: 3, text: 'Cherry' }
])

// Later update
items.value = [
  { id: 1, text: 'Apple' },
  { id: 2, text: 'Blueberry' },
  { id: 4, text: 'Date' }
]
</script>

What will Vue do when updating the DOM?

hard

A. Update text for id 2, remove id 3, add id 4

B. Replace entire list with new elements

C. Only add new item id 4, keep others unchanged

D. Throw error due to missing id 3

Solution

1. Step 1: Compare old and new items by keys

   Item with id 2 changes text, id 3 is removed, and id 4 is new.

2. Step 2: Understand Vue's diffing update

   Vue updates changed text for id 2, removes the element for id 3, and adds a new element for id 4.

3. Final Answer:

   Update text for id 2, remove id 3, add id 4 -> Option A

4. Quick Check:

   Vue updates changed, removes missing, adds new [OK]

Hint: Vue updates changed keys, removes missing, adds new [OK]

Common Mistakes:

• Thinking Vue replaces entire list always
• Assuming Vue ignores text changes
• Believing Vue throws errors on removed keys