Virtual DOM and diffing mental model in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a virtual DOM node using Vue's h function.

Vue

import { h } from 'vue';
const vnode = h('div', { class: '[1]' }, 'Hello World');

Drag options to blanks, or click blank then click option'

Acontainer

Bwrapper

Cbox

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of an object for the second argument.

Leaving the class name empty or misspelled.

The h function creates a virtual DOM node. The second argument is an object for attributes like class. Here, 'content' is the class name.

2fill in blank

medium

Complete the code to patch the old virtual DOM with the new one using Vue's patch function.

Vue

import { createApp, h } from 'vue';
const oldVnode = h('p', 'Old text');
const newVnode = h('p', 'New text');
const container = document.getElementById('app');
const app = createApp({});
app.mount(container);
app._container.__vue_app__.config.globalProperties.$patch(oldVnode, [1]);

Drag options to blanks, or click blank then click option'

AnewVnode

Bapp

Ccontainer

DoldVnode

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the old virtual DOM node again instead of the new one.

Passing the container or app instance instead of a vnode.

The patch function updates the old virtual DOM node to match the new one. So, you pass newVnode as the second argument.

3fill in blank

hard

Fix the error in the diffing function that compares two virtual DOM nodes by completing the blank.

Vue

function isSameVNode(oldVNode, newVNode) {
  return oldVNode.type === newVNode.[1];
}

Drag options to blanks, or click blank then click option'

Atype

Btag

Cname

DnodeType

Attempts:

3 left

💡 Hint

Common Mistakes

Using tag which is not a Vue vnode property.

Using name or nodeType which are incorrect here.

In Vue's virtual DOM, the type property holds the element type (like 'div' or 'span'). Comparing type checks if nodes are the same kind.

4fill in blank

hard

Fill both blanks to create a new vnode with a key and children array.

Vue

const vnode = h('ul', { key: [1] }, [h('li', 'Item 1'), [2] ]);

Drag options to blanks, or click blank then click option'

A'list-1'

Bh('li', 'Item 2')

Ch('li', 'Item 3')

D'item-1'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number instead of a string for the key.

Putting a string instead of a vnode in the children array.

The key helps Vue track nodes. The children array holds h calls for list items. Here, 'list-1' is the key and h('li', 'Item 2') is the second child.

5fill in blank

hard

Fill all three blanks to create a reactive state, update it, and reflect the change in the template.

Vue

<template>
  <p>{{ [1] }}</p>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
function increment() {
  [2] = [3] + 1;
}
</script>

Drag options to blanks, or click blank then click option'

Acount

Bcount.value

Attempts:

3 left

💡 Hint

Common Mistakes

Using count.value in the template interpolation.

Assigning to count directly in script instead of count.value.

In Vue, reactive refs are accessed in templates by their name (count). In script, update the value with count.value. So, increment sets count.value = count.value + 1.

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