Why reactivity is Vue's core concept - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive variable in Vue.

Vue

const count = [1](0);

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

Acomputed

Breactive

Cwatch

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for primitive values.

In Vue, ref is used to create a reactive primitive value like a number.

2fill in blank

medium

Complete the code to create a reactive object in Vue.

Vue

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

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

Areactive

Bref

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref instead of reactive for objects.

reactive is used to make an object reactive in Vue.

3fill in blank

hard

Fix the error in the code to correctly watch a reactive variable.

Vue

watch([1], (newVal) => { console.log(newVal); });

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

Acount.value

Bcount

Cstate

Dstate.count

Attempts:

3 left

💡 Hint

Common Mistakes

Using count.value instead of count when passing to watch.

To watch a ref, pass the ref directly to watch. The callback receives the unwrapped value automatically.

4fill in blank

hard

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

Vue

const doubleCount = [1](() => [2] * 2);

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

Acomputed

Bcount.value

Ccount

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using count without .value inside computed.

computed creates a reactive computed property, and you must use count.value to access the ref's value.

5fill in blank

hard

Fill all three blanks to create a reactive object with a nested reactive property and watch it.

Vue

const state = [1]({ nested: [2]({ value: 1 }) });
watch(() => state.nested.[3], (val) => console.log(val));

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

Areactive

Bref

Cvalue

Dcomputed

Attempts:

3 left

💡 Hint

Common Mistakes

Not using ref for nested reactive property.

Watching the nested ref without .value.

Use reactive for the outer object, ref for the nested reactive property, and watch the .value inside the nested ref.