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.

Practice

1. Why is reactivity considered the core concept in Vue?

easy

A. Because it automatically updates the UI when data changes

B. Because it requires manual DOM updates

C. Because it only works with static data

D. Because it disables user interaction

Solution

1. Step 1: Understand what reactivity means in Vue

   Reactivity means Vue tracks data changes and updates the UI automatically without manual work.

2. Step 2: Identify why this is important

   This automatic update makes building interactive apps easier and cleaner by syncing data and UI.

3. Final Answer:

   Because it automatically updates the UI when data changes -> Option A

4. Quick Check:

   Reactivity = automatic UI update [OK]

Hint: Reactivity means UI changes with data changes [OK]

Common Mistakes:

• Thinking reactivity requires manual DOM updates
• Believing reactivity only works with static data
• Confusing reactivity with disabling interaction

2. Which Vue syntax correctly creates a reactive single value?

easy

A. const count = ref(0)

B. const count = reactive(0)

C. const count = reactive({ value: 0 })

D. const count = useState(0)

Solution

1. Step 1: Recall Vue's reactive APIs

   Use ref for single primitive values and reactive for objects.

2. Step 2: Match syntax to single value reactivity

   ref(0) creates a reactive number, while reactive expects an object.

3. Final Answer:

   const count = ref(0) -> Option A

4. Quick Check:

   Single value reactive = ref() [OK]

Hint: Use ref() for single reactive values [OK]

Common Mistakes:

• Using reactive() for primitive values
• Confusing useState with Vue APIs
• Wrapping primitives inside reactive() incorrectly

3. What will be the output of this Vue code snippet?

const state = reactive({ count: 0 });
state.count++;
console.log(state.count);

medium

A. 0

B. 1

C. undefined

D. Error

Solution

1. Step 1: Understand reactive object behavior

   The reactive function wraps the object so changes to properties are tracked.

2. Step 2: Analyze the code increment and output

   Starting from 0, state.count++ increases count to 1, so logging prints 1.

3. Final Answer:

   1 -> Option B

4. Quick Check:

   Incremented reactive count = 1 [OK]

Hint: reactive objects update properties directly [OK]

Common Mistakes:

• Expecting 0 because reactive is misunderstood
• Thinking reactive returns a primitive
• Assuming an error due to missing Vue setup

4. Identify the error in this Vue reactive code:

const state = ref({ count: 0 });
state.count++;
console.log(state.count);

medium

A. state.count is undefined because count is not reactive

B. ref cannot hold objects

C. You cannot increment a property on a ref object directly

D. Missing import of reactive

Solution

1. Step 1: Understand ref with objects

   ref wraps the entire object inside a .value property.

2. Step 2: Identify incorrect property access

   Accessing state.count is wrong; it should be state.value.count.

3. Final Answer:

   You cannot increment a property on a ref object directly -> Option C

4. Quick Check:

   ref object properties accessed via .value [OK]

Hint: Use .value to access ref object properties [OK]

Common Mistakes:

• Trying to increment ref object properties directly
• Confusing ref and reactive usage
• Ignoring .value when using ref

5. You want to create a reactive object with nested properties and update a nested value so the UI updates automatically. Which approach is correct?

const data = ???
data.user.name = 'Alice';

hard

A. const data = reactive({ user: reactive({ name: 'Bob' }) })

B. const data = ref({ user: { name: 'Bob' } })

C. const data = ref({ user: ref({ name: 'Bob' }) })

D. const data = reactive({ user: { name: 'Bob' } })

Solution

1. Step 1: Choose reactive for nested objects

   reactive makes the whole object and nested properties reactive automatically.

2. Step 2: Confirm nested property update works

   With reactive, updating data.user.name triggers UI updates without extra refs.

3. Final Answer:

   const data = reactive({ user: { name: 'Bob' } }) -> Option D

4. Quick Check:

   Nested reactive object = reactive() [OK]

Hint: Use reactive() for nested reactive objects [OK]

Common Mistakes:

• Using ref() for nested objects without .value
• Wrapping nested objects unnecessarily in reactive
• Mixing ref and reactive incorrectly