Reactivity caveats and limitations in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What happens if you add a new property to a reactive object after it is created in Vue 3?

New properties added to reactive objects are tracked and reactive in Vue 3, unlike Vue 2 where you had to use Vue.set. However, if you add properties to a plain object that is not reactive, Vue won't track them.

intermediate

In Vue 3, what happens if you modify an array by setting an index directly (e.g., arr[1] = value)?

It triggers reactivity because Vue's Proxy system detects array index changes. This was a limitation in Vue 2 where splice or other methods were needed.

intermediate

Explain why Vue's reactivity system might not detect changes to properties inside a Map or Set.

Vue's reactivity system does not automatically track changes inside Map or Set because they are complex data structures. You need to use Vue's reactive APIs or wrap them properly to track mutations.

beginner

What is a common pitfall when using reactive refs with objects in Vue 3?

A common pitfall is forgetting to unwrap refs inside templates or scripts, leading to unexpected behavior. Use .value to access or modify the inner value of a ref.

advanced

Why might deep nested changes in reactive objects sometimes not trigger updates in Vue?

If nested objects are not reactive or created outside Vue's reactive system, changes inside them won't trigger updates. Always create nested objects using reactive or ref to ensure deep reactivity.

In Vue 3, how do you ensure adding a new property to an object is reactive?

A Use Object.assign to add the property

B Use Vue.set method

C Add the property directly to the reactive object

D Recreate the entire object with the new property

In Vue 3, reactive objects track new properties added directly, so you can add them normally.

Which method should you use to update an array element reactively in Vue?

A Use arr.splice(index, 1, value)

B Directly assign with arr[index] = value

C Use arr.push(value)

D Use Object.assign(arr, {index: value})

In Vue 3, both splice() and direct index assignment trigger reactivity via Proxy. Splice was essential in Vue 2.

What must you do to track changes inside a Map in Vue's reactivity system?

A Nothing, Vue tracks Map changes automatically

B Wrap the Map with reactive() or ref()

C Convert Map to a plain object

D Use Vue.set on Map keys

Vue does not track Map mutations automatically; wrapping with reactive or ref is needed.

How do you access the value inside a ref in Vue 3 scripts?

A ref.get()

B ref()

C ref.inner

D ref.value

The .value property holds the inner value of a ref.

Why might changes in deeply nested objects not trigger updates in Vue?

A Because nested objects are not reactive if created outside Vue's reactive system

B Because Vue only tracks shallow changes

C Because Vue does not support nested objects

D Because nested objects must be arrays

Nested objects must be reactive to trigger updates; otherwise, Vue won't detect changes.

Describe common limitations of Vue's reactivity system and how to work around them.

Think about what Vue can and cannot detect automatically and how to ensure reactivity.

Explain how direct assignment to array indexes is handled in Vue 3 reactivity and best practices.

Consider how Vue watches array changes.

Practice

1. Which of the following is a known limitation of Vue's reactivity system?

easy

A. Using Vue's reactive() function disables reactivity for nested objects.

B. Changing a reactive property always triggers an update immediately.

C. Adding a new property directly to an existing reactive object won't trigger updates.

D. Vue automatically tracks changes to all array indices without exceptions.

Solution

1. Step 1: Understand Vue's reactivity on object properties

   Vue cannot detect new properties added directly to an existing reactive object after its creation.

2. Step 2: Compare options with this limitation

   Adding a new property directly to an existing reactive object won't trigger updates correctly states this limitation. The other options are incorrect because reactive() supports nested objects, property changes do trigger updates (though batched asynchronously), and Vue has exceptions for some array changes like setting length.

3. Final Answer:

   Adding a new property directly to an existing reactive object won't trigger updates. -> Option C

4. Quick Check:

   New object properties not reactive = C [OK]

Hint: Remember: Vue can't detect new object properties added later [OK]

Common Mistakes:

• Assuming all object property additions are reactive
• Thinking array index changes always trigger updates
• Believing reactive() disables nested reactivity

2. Which syntax correctly updates an array element reactively in Vue?

easy

A. myArray[2] = 'new value'

B. myArray = ['new value']

C. myArray.push('new value')

D. myArray.$set(2, 'new value')

Solution

1. Step 1: Identify reactive array update methods

   Directly assigning to an array index (like myArray[2] = ...) is reactive in Vue 3 for reactive arrays.

2. Step 2: Evaluate each option

   myArray[2] = 'new value' uses direct assignment which triggers reactivity in Vue 3. myArray = ['new value'] replaces the whole array. myArray.push('new value') adds an element at the end. myArray.$set(2, 'new value') uses Vue 2 syntax unavailable in Vue 3.

3. Final Answer:

   myArray[2] = 'new value' -> Option A

4. Quick Check:

   Direct array index updates reactive in Vue 3 = A [OK]

Hint: Directly assign to reactive array indices in Vue 3 [OK]

Common Mistakes:

• Replacing the entire array instead of updating an element
• Using push() to update a specific index
• Using Vue 2 methods like $set in Vue 3

3. Given the code:

const state = reactive({ items: ['a', 'b', 'c'] });
state.items[1] = 'x';
console.log(state.items);

What will be logged?

medium

A. ['a', 'b', 'c']

B. ['a', 'x', 'c']

C. Error: Cannot assign to reactive array index

D. ['a', 'b', 'c', 'x']

Solution

1. Step 1: Understand array index reactivity in Vue 3

   In Vue 3, reactive arrays track direct index assignments reactively, so state.items[1] = 'x' updates the array.

2. Step 2: Predict the console output

   The array changes from ['a', 'b', 'c'] to ['a', 'x', 'c'], so logging state.items shows the updated array.

3. Final Answer:

   ['a', 'x', 'c'] -> Option B

4. Quick Check:

   Vue 3 reactive arrays track index changes = A [OK]

Hint: Vue 3 tracks direct array index changes reactively [OK]

Common Mistakes:

• Thinking direct index assignment is not reactive in Vue 3
• Expecting an error on index assignment
• Confusing array push with index update

4. What is the problem with this Vue reactive code?

const obj = reactive({});
obj.newProp = 123;
console.log(obj.newProp);

medium

A. newProp is added but changes won't trigger updates

B. newProp is reactive and logs 123

C. newProp is not reactive and logs undefined

D. Code throws a runtime error

Solution

1. Step 1: Check adding new properties to reactive objects

   Vue cannot detect new properties added directly to reactive objects after creation, so newProp is added but not reactive.

2. Step 2: Understand console output and reactivity

   newProp logs 123 correctly, but changes to it won't trigger UI updates because Vue didn't track it reactively.

3. Final Answer:

   newProp is added but changes won't trigger updates -> Option A

4. Quick Check:

   New object properties added later not tracked = B [OK]

Hint: New object properties added later are not reactive by default [OK]

Common Mistakes:

• Assuming newProp is reactive immediately
• Expecting undefined instead of 123
• Thinking code throws an error

5. You want to add a new property age to a reactive object user and ensure Vue tracks it reactively. Which approach is correct?

hard

A. user['age'] = 30

B. user.age = 30

C. Vue.set(user, 'age', 30)

D. user = { ...user, age: 30 }

Solution

1. Step 1: Understand Vue 3 reactivity and adding new properties

   Vue 3 does not track new properties added directly to reactive objects. Using object spread creates a new reactive object with the new property.

2. Step 2: Evaluate each option for reactivity

   Direct property assignments do not make properties reactive. Vue.set(user, 'age', 30) is Vue 2 syntax and not available in Vue 3. user = { ...user, age: 30 } creates a new reactive object with age included, ensuring reactivity.

3. Final Answer:

   user = { ...user, age: 30 } -> Option D

4. Quick Check:

   Use object spread to add reactive properties = A [OK]

Hint: Use object spread to add reactive properties in Vue 3 [OK]

Common Mistakes:

• Using Vue.set in Vue 3 (deprecated)
• Adding properties directly expecting reactivity
• Confusing direct assignment with reactive update