Shallow ref and shallow reactive in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a shallowRef in Vue?

shallowRef creates a reactive reference that tracks changes only to the top-level value, not nested properties.

This means if you change a nested object inside it, Vue won't detect that change automatically.

beginner

How does shallowReactive differ from reactive in Vue?

shallowReactive makes only the first level of an object reactive.

Nested objects inside it are not reactive, unlike reactive which makes all nested properties reactive.

intermediate

Why use shallowRef or shallowReactive instead of full reactivity?

They improve performance by avoiding deep tracking of nested properties.

Useful when you don't need to react to changes inside nested objects or when working with large data structures.

intermediate

What happens if you update a nested property inside a shallowReactive object?

Vue will NOT detect the change and will not trigger updates.

You need to replace the whole nested object or use a fully reactive object to track nested changes.

beginner

Show a simple example of creating a shallowRef and updating its nested property.

<pre>import { shallowRef } from 'vue';

const state = shallowRef({ count: 0, nested: { value: 10 } });

// Updating nested property
state.value.nested.value = 20; // Vue will NOT detect this change

// Updating top-level property
state.value = { count: 1, nested: { value: 20 } }; // Vue detects this change</pre>

What does shallowRef track reactively in Vue?

A No changes at all

B All nested property changes

C Only the top-level value changes

D Only array changes

shallowRef tracks only the top-level value changes, not nested properties.

Which Vue function makes only the first level of an object reactive?

A shallowReactive

B computed

C ref

D reactive

shallowReactive makes only the first level reactive, unlike reactive which is deep.

If you update a nested property inside a shallowReactive object, what happens?

A Vue detects and updates the UI

B Vue ignores the change

C Vue throws an error

D Vue reloads the page

Vue ignores nested changes in shallowReactive objects.

Why might you choose shallowRef over ref?

A To track deep nested changes

B To automatically watch all nested arrays

C To disable reactivity completely

D To improve performance by avoiding deep tracking

shallowRef improves performance by avoiding deep reactivity.

Which of these is true about shallowReactive?

A It only tracks changes on the first level

B It disables all reactivity

C It makes nested objects reactive

D It works only with arrays

shallowReactive tracks only first-level changes, not nested ones.

Explain in your own words what shallowRef and shallowReactive do in Vue and when you might use them.

Think about how deep Vue normally tracks changes and how shallow versions limit that.

Describe what happens if you update a nested property inside a shallowReactive object and how you can work around it.

Consider Vue's reactivity system and how shallow reactivity limits detection.

Practice

1. What does shallowRef in Vue track reactively?

easy

A. All nested properties deeply inside the object

B. Only primitive values inside the object

C. Only changes to the reference itself, not nested properties

D. Changes only to arrays, not objects

Solution

1. Step 1: Understand shallowRef behavior

   shallowRef tracks reactivity only when the reference changes, not inside nested objects.

2. Step 2: Compare with deep reactivity

   Unlike ref or reactive, it does not track nested property changes.

3. Final Answer:

   Only changes to the reference itself, not nested properties -> Option C

4. Quick Check:

   shallowRef tracks reference, not deep changes [OK]

Hint: shallowRef tracks only the outer reference change [OK]

Common Mistakes:

• Thinking shallowRef tracks nested property changes
• Confusing shallowRef with reactive
• Assuming shallowRef tracks primitive values inside

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

easy

A. const state = reactive({ count: 0, nested: { value: 1 } })

B. const state = shallowReactive({ count: 0, nested: { value: 1 } })

C. const state = shallowRef({ count: 0, nested: { value: 1 } })

D. const state = ref({ count: 0, nested: { value: 1 } })

Solution

1. Step 1: Identify shallow reactive syntax

   shallowReactive is used to create a shallow reactive object that tracks only top-level properties.

2. Step 2: Differentiate from other APIs

   reactive creates deep reactivity, shallowRef and ref create refs, not shallow reactive objects.

3. Final Answer:

   const state = shallowReactive({ count: 0, nested: { value: 1 } }) -> Option B

4. Quick Check:

   shallowReactive creates shallow reactive objects [OK]

Hint: Use shallowReactive() for shallow reactive objects [OK]

Common Mistakes:

• Using reactive() instead of shallowReactive()
• Confusing shallowRef with shallowReactive
• Using ref() for reactive objects

3. Given the code:

const state = shallowReactive({ count: 0, nested: { value: 1 } });

state.nested.value = 2;
console.log(state.nested.value);

What will be logged to the console?

medium

A. Error: Cannot assign to nested property

B. 1

C. undefined

D. 2

Solution

1. Step 1: Understand shallowReactive behavior

   shallowReactive tracks only top-level properties reactively, but nested objects still exist and can be mutated normally.

2. Step 2: Check nested property assignment

   Assigning state.nested.value = 2 changes the nested object property directly, so the value updates.

3. Final Answer:

   2 -> Option D

4. Quick Check:

   Nested objects update but are not reactive [OK]

Hint: shallowReactive allows nested mutation but no reactivity inside [OK]

Common Mistakes:

• Assuming nested changes are not possible
• Expecting nested changes to trigger reactivity
• Thinking assignment causes error

4. What is the problem with this code snippet?

const state = shallowRef({ count: 0, nested: { value: 1 } });

state.value.nested.value = 5;
console.log(state.value.nested.value);

medium

A. Nested property change won't trigger reactivity

B. Syntax error due to incorrect property access

C. state.value is undefined

D. Cannot assign to nested property inside shallowRef

Solution

1. Step 1: Analyze shallowRef behavior

   shallowRef tracks only changes to the reference itself, not nested properties inside the object.

2. Step 2: Understand nested mutation effect

   Changing state.value.nested.value updates the nested property but does not trigger Vue reactivity updates.

3. Final Answer:

   Nested property change won't trigger reactivity -> Option A

4. Quick Check:

   shallowRef ignores nested property changes [OK]

Hint: shallowRef ignores nested changes, only tracks reference [OK]

Common Mistakes:

• Expecting nested changes to trigger updates
• Confusing shallowRef with reactive
• Thinking this causes syntax or runtime errors

5. You want to optimize performance by tracking only top-level changes in a complex object with nested data. Which approach correctly combines shallow reactivity with a watch to detect nested changes manually?

const state = shallowReactive({ user: { name: 'Alice', age: 30 } });

watch(() => state.user, (newVal, oldVal) => {
  console.log('User changed:', newVal);
});

state.user.name = 'Bob';

What is the expected behavior?

hard

A. The watch callback runs only if state.user is replaced entirely

B. The watch callback runs immediately when state.user.name changes

C. The watch callback will run when state.user.name changes

D. The watch callback runs twice for nested changes

Solution

1. Step 1: Understand shallowReactive and watch

   shallowReactive tracks only top-level properties reactively. The watch on state.user triggers only if the user object reference changes.

2. Step 2: Analyze nested property mutation

   Changing state.user.name mutates a nested property but does not replace the user object, so the watch callback does not run.

3. Final Answer:

   The watch callback runs only if state.user is replaced entirely -> Option A

4. Quick Check:

   shallowReactive watches top-level refs only [OK]

Hint: Watch triggers only on reference changes with shallowReactive [OK]

Common Mistakes:

• Expecting watch to detect nested property changes
• Assuming watch runs on every nested mutation
• Confusing shallowReactive with deep reactive