Why deep reactivity understanding matters in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive object in Vue.

Vue

const state = reactive({ count: [1] })

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

A0

Bnull

Cundefined

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using null or undefined as initial count causes unexpected behavior.

We start the count at 0 to track changes reactively.

2fill in blank

medium

Complete the code to watch a reactive property in Vue.

Vue

watch(() => state.count, (newVal, oldVal) => { console.log([1]) })

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

AoldVal

Bstate.count

CnewVal

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Logging oldVal shows the previous value, not the current one.

We log the new value whenever the count changes.

3fill in blank

hard

Fix the error in the code to update a nested reactive property correctly.

Vue

state.user.name = [1]

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

AAlice

B'Alice'

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around string literals causes runtime errors.

Strings must be wrapped in quotes to assign properly.

4fill in blank

hard

Fill both blanks to create a computed property that doubles a reactive count.

Vue

const doubleCount = computed(() => state.count [1] 2 [2] 0 )

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

A*

B+

C-

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using + instead of * changes the meaning.

We multiply count by 2, then add 0 (which is optional but here for syntax).

5fill in blank

hard

Fill all three blanks to create a reactive object with a nested reactive array and update it.

Vue

const state = reactive({ items: [1] }) 
state.items.push([2]) 
console.log(state.items[[3]])

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

A[]

B'new item'

C0

D{}

Attempts:

3 left

💡 Hint

Common Mistakes

Using {} instead of [] for array initialization causes errors.

We start with an empty array, push a string, then log the first item at index 0.