Virtual DOM and diffing mental model in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a reactive property changes in Vue's Virtual DOM?

Consider a Vue 3 component using the Composition API with a reactive property. When this property changes, what does Vue's Virtual DOM do next?

Vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>
<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

A Vue discards the old Virtual DOM and replaces the entire real DOM with a new one.

B Vue immediately updates the real DOM without any intermediate steps.

C Vue creates a new Virtual DOM tree, compares it with the old one, and updates only the changed parts in the real DOM.

D Vue waits for all reactive properties to change before updating the DOM once.

💡 Hint

Think about how Vue optimizes updates to avoid unnecessary changes.

Vue uses a Virtual DOM to efficiently update the real DOM. When a reactive property changes, Vue creates a new Virtual DOM tree, compares it with the previous one (diffing), and applies only the minimal changes needed to the real DOM.

📝 Syntax

intermediate

Which Vue 3 code snippet correctly triggers a Virtual DOM update?

Given the following Vue 3 setup, which option correctly updates the reactive state to trigger a Virtual DOM diff and patch?

Vue

<script setup>
import { reactive } from 'vue'
const state = reactive({ count: 0 })
function updateCount() {
  // update count here
}
</script>

A state.count += 1

B state = { count: state.count + 1 }

C state.count = state.count.toString() + '1'

D

state.count++
state = reactive(state)

💡 Hint

Remember how reactive objects work in Vue 3.

In Vue 3, reactive objects track property changes. Directly modifying a property like state.count += 1 triggers reactivity and Virtual DOM updates. Reassigning the whole object or mixing types breaks reactivity or causes errors.

🔧 Debug

advanced

Why does this Vue 3 component not update the DOM after changing a reactive array?

Examine the code below. The array is reactive, but the DOM does not update after pushing a new item. What is the cause?

Vue

<script setup>
import { reactive } from 'vue'
const state = reactive({ items: [] })
function addItem(item) {
  state.items.push(item)
}
</script>
<template>
  <ul>
    <li v-for="item in state.items" :key="item">{{ item }}</li>
  </ul>
  <button @click="addItem('new')">Add</button>
</template>

A The push method is asynchronous and does not trigger immediate updates.

B The reactive object was not created with ref, so changes are not tracked.

C The reactive array is mutated directly, which Vue cannot detect; use a new array instead.

D The key in v-for is not unique enough, causing Vue to skip updates.

💡 Hint

Check the uniqueness of keys in v-for loops.

Vue uses keys in v-for to track elements. Using the item string as a key can cause issues if items repeat, preventing proper DOM updates. Keys must be unique and stable.

🧠 Conceptual

advanced

How does Vue's diffing algorithm optimize updates for lists with keys?

When Vue compares old and new Virtual DOM trees for a list with keys, how does it optimize the update process?

A It uses the keys to match old and new nodes, minimizing moves and re-renders by reusing existing elements.

B It ignores keys and always re-renders the entire list to ensure correctness.

C It sorts the list alphabetically before diffing to reduce complexity.

D It clones the entire list and replaces the DOM nodes without comparison.

💡 Hint

Think about how keys help Vue identify elements uniquely.

Keys allow Vue to track elements between renders. The diffing algorithm uses keys to find matching nodes and only moves or updates what changed, improving performance.

❓ state_output

expert

What is the final rendered output after these reactive updates in Vue 3?

Given the following Vue 3 component, what will be the rendered list after clicking the button twice?

Vue

<script setup>
import { reactive } from 'vue'
const state = reactive({ items: ['a', 'b', 'c'] })
function update() {
  state.items.splice(1, 1, 'x')
  state.items.push('d')
}
</script>
<template>
  <ul>
    <li v-for="item in state.items" :key="item">{{ item }}</li>
  </ul>
  <button @click="update">Update</button>
</template>

A <ul><li>a</li><li>x</li><li>x</li><li>d</li><li>d</li></ul>

B <ul><li>a</li><li>x</li><li>c</li><li>d</li><li>d</li></ul>

C <ul><li>a</li><li>x</li><li>c</li><li>d</li></ul>

D <ul><li>a</li><li>b</li><li>c</li><li>d</li><li>d</li></ul>

💡 Hint

Consider how splice and push modify the array each time the button is clicked.

Each click replaces the second item with 'x' and adds 'd' at the end. After two clicks, the list is ['a', 'x', 'c', 'd', 'd'].

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