Challenge - 5 Problems

🎖️

Virtual DOM Mastery

Get all challenges correct to earn this badge!

Test your skills under time pressure!

❓ component_behavior

intermediate

2:00remaining

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>

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

BVue immediately updates the real DOM without any intermediate steps.

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

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

Attempts:

2 left

📝 Syntax

intermediate

2:00remaining

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>

Astate.count += 1

Bstate = { count: state.count + 1 }

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

state.count++
state = reactive(state)

Attempts:

2 left

🔧 Debug

advanced

2:00remaining

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>

AThe push method is asynchronous and does not trigger immediate updates.

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

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

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

Attempts:

2 left

🧠 Conceptual

advanced

2:00remaining

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?

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

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

CIt sorts the list alphabetically before diffing to reduce complexity.

DIt clones the entire list and replaces the DOM nodes without comparison.

Attempts:

2 left

❓ state_output

expert

2:00remaining

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>

Attempts:

2 left