Reactive objects with reactive in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive object named state.

Vue

import { reactive } from 'vue';

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

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

Aref

Breactive

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref instead of reactive for objects

Forgetting to import reactive from 'vue'

Use reactive to create a reactive object in Vue.

2fill in blank

medium

Complete the code to update the count property reactively.

Vue

state.[1] = 5;

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

Acount

Bvalue

Cset

Dupdate

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign to a non-existent property like 'value'

Using methods like set or update which do not exist

Access the property count directly on the reactive object to update it.

3fill in blank

hard

Fix the error in the code to correctly create a reactive object.

Vue

const state = reactive([1]);

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

A[count: 0]

B(count: 0)

C{ count: 0 }

D"count: 0"

Attempts:

3 left

💡 Hint

Common Mistakes

Using array or parentheses instead of object literal

Passing a string instead of an object

The argument to reactive must be an object literal with curly braces.

4fill in blank

hard

Fill both blanks to create a reactive object with a nested property and update it.

Vue

const state = reactive({ user: { name: 'Alice' } });
state.user.[1] = [2];

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

Aname

B'Bob'

C'Alice'

Dage

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to update a non-existent property

Forgetting quotes around string values

Update the nested property name to the new value 'Bob'.

5fill in blank

hard

Fill all three blanks to create a reactive object and add a new property reactively.

Vue

const state = reactive({ count: 0 });
state.[1] = [2];
console.log(state.[3]);

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

Amessage

B'Hello'

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using different property names when assigning and logging

Forgetting quotes around string values

Add a new reactive property message with value 'Hello' and log it.

Practice

1. What does the reactive function in Vue do?

easy

A. It converts a reactive object into a plain JavaScript object.

B. It makes an object reactive so Vue tracks its changes automatically.

C. It creates a new Vue component.

D. It registers a global event listener.

Solution

1. Step 1: Understand the purpose of reactive

   The reactive function wraps an object so Vue can track its property changes.

2. Step 2: Compare options with the purpose

   Only It makes an object reactive so Vue tracks its changes automatically. correctly describes this behavior; others describe unrelated Vue features.

3. Final Answer:

   It makes an object reactive so Vue tracks its changes automatically. -> Option B

4. Quick Check:

   reactive() tracks object changes = C [OK]

Hint: Remember: reactive() wraps objects to track changes [OK]

Common Mistakes:

• Confusing reactive() with component creation
• Thinking reactive() converts reactive objects back to plain objects
• Assuming reactive() adds event listeners

2. Which of the following is the correct way to create a reactive object in Vue 3?

easy

A. const state = reactive.count = 0

B. const state = reactive = { count: 0 }

C. const state = reactive([count: 0])

D. const state = reactive({ count: 0 })

Solution

1. Step 1: Check the syntax for reactive object creation

   The correct syntax is calling reactive() with an object: reactive({ count: 0 }).

2. Step 2: Identify syntax errors in other options

   const state = reactive = { count: 0 } uses invalid assignment, C uses array syntax incorrectly, D tries to assign property directly without reactive call.

3. Final Answer:

   const state = reactive({ count: 0 }) -> Option D

4. Quick Check:

   reactive() called with object literal = A [OK]

Hint: Use reactive() with an object inside parentheses [OK]

Common Mistakes:

• Using assignment instead of function call
• Passing array instead of object
• Assigning properties outside reactive()

3. Given this code, what will be logged to the console?

import { reactive } from 'vue'
const state = reactive({ count: 1 })
state.count = 5
console.log(state.count)

medium

A. 5

B. Error: Cannot assign to reactive property

C. undefined

D. 1

Solution

1. Step 1: Understand reactive object property update

   Assigning state.count = 5 updates the reactive property value.

2. Step 2: Check the logged value

   Logging state.count after update outputs the new value 5.

3. Final Answer:

   5 -> Option A

4. Quick Check:

   Updated reactive property logs new value = D [OK]

Hint: Reactive objects update properties directly and reflect changes [OK]

Common Mistakes:

• Thinking reactive objects are immutable
• Expecting old value after update
• Confusing reactive with ref syntax

4. What is wrong with this Vue 3 code snippet?

import { reactive } from 'vue'
const state = reactive({ count: 0 })
state = { count: 5 }

medium

A. You cannot reassign a reactive object variable directly.

B. The reactive function requires an array, not an object.

C. The property count must be declared with ref(), not reactive.

D. Reactive objects cannot have numeric properties.

Solution

1. Step 1: Identify the error in variable reassignment

   The variable state is declared with const, so it cannot be reassigned.

2. Step 2: Understand reactive object usage

   Reactive objects are mutable in their properties but the variable holding them cannot be reassigned if declared const.

3. Final Answer:

   You cannot reassign a reactive object variable directly. -> Option A

4. Quick Check:

   const variable reassignment causes error = A [OK]

Hint: const variables can't be reassigned, only their properties changed [OK]

Common Mistakes:

• Trying to reassign const reactive variables
• Confusing reactive() input types
• Thinking reactive objects restrict property types

5. You want to create a reactive object to track a user's profile with nested address info. Which code correctly makes the entire object reactive so changes to nested properties update the UI?

hard

A. const profile = reactive({ name: 'Alice' }); profile.address = { city: 'NY', zip: '10001' }

B. const profile = { name: 'Alice', address: reactive({ city: 'NY', zip: '10001' }) }

C. const profile = reactive({ name: 'Alice', address: { city: 'NY', zip: '10001' } })

D. const profile = reactive({ name: 'Alice', address: ref({ city: 'NY', zip: '10001' }) })

Solution

1. Step 1: Understand nested reactivity with reactive()

   Using reactive() on the whole object recursively makes nested properties reactive automatically.

2. Step 2: Analyze each option's approach

   const profile = reactive({ name: 'Alice', address: { city: 'NY', zip: '10001' } }) wraps the entire object including nested address, so all changes are reactive. const profile = reactive({ name: 'Alice' }); profile.address = { city: 'NY', zip: '10001' } assigns a plain object to nested property after reactive call, losing reactivity for nested changes. const profile = { name: 'Alice', address: reactive({ city: 'NY', zip: '10001' }) } mixes reactive inside plain object, which breaks reactivity tracking. const profile = reactive({ name: 'Alice', address: ref({ city: 'NY', zip: '10001' }) }) mixes ref inside reactive, which is invalid since reactive expects plain objects.

3. Final Answer:

   const profile = reactive({ name: 'Alice', address: { city: 'NY', zip: '10001' } }) -> Option C

4. Quick Check:

   reactive() wraps whole nested object = B [OK]

Hint: Wrap entire nested object with reactive() for full reactivity [OK]

Common Mistakes:

• Wrapping nested objects separately after reactive() call
• Mixing reactive and plain objects incorrectly
• Assigning plain objects to reactive properties