Shallow ref and shallow reactive in Vue - Step-by-Step Execution

Concept Flow - Shallow ref and shallow reactive

Create shallowRef or shallowReactive

↓

Wrap object shallowly

↓

Access or modify top-level properties

↓

Reactivity triggers only for top-level changes

↓

Nested objects remain non-reactive

↓

Use in template or watch for updates

This flow shows how shallowRef or shallowReactive wraps an object shallowly, tracking only top-level changes reactively while nested objects stay non-reactive.

Execution Sample

Vue

import { shallowRef, shallowReactive } from 'vue';

const state = shallowReactive({
  user: { name: 'Alice' },
  count: 0
});

state.count = 1; // triggers update
state.user.name = 'Bob'; // does NOT trigger update

This code creates a shallow reactive object where only top-level changes like count update reactively, but nested changes like user.name do not.

Execution Table

Step	Action	Property Changed	Reactivity Triggered	Effect
1	Create shallowReactive object	none	none	state is reactive only at top level
2	Change state.count from 0 to 1	count	Yes	Reactive update triggered
3	Change state.user.name from 'Alice' to 'Bob'	user.name	No	No reactive update triggered
4	Replace state.user with new object	user	Yes	Reactive update triggered
5	Modify nested property of new state.user	user.name	No	No reactive update triggered

💡 No more changes; nested properties do not trigger reactivity in shallowReactive

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5
state.count	0	1	1	1	1
state.user.name	'Alice'	'Alice'	'Bob'	'Bob'	'Bob'

Key Moments - 2 Insights

Why does changing state.user.name not trigger a reactive update?

Because shallowReactive only tracks top-level properties reactively. Nested properties like user.name are not reactive, as shown in step 3 of the execution_table.

What happens if we replace the entire nested object state.user?

Replacing the whole nested object triggers reactivity because the top-level property user changes, as shown in step 4 of the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, at which step does changing a nested property NOT trigger reactivity?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Check the 'Reactivity Triggered' column for steps 3 and 5 in the execution_table.

According to variable_tracker, what is the value of state.count after step 2?

A 1

B 'Alice'

C 0

D 'Bob'

💡 Hint

Look at the 'state.count' row under 'After Step 2' in variable_tracker.

If we want nested properties to be reactive, what should we use instead of shallowReactive?

A ref

B shallowRef

C reactive

D computed

💡 Hint

Recall that shallowReactive only tracks top-level; full reactive tracks nested properties.

Concept Snapshot

shallowRef and shallowReactive wrap objects shallowly.
Only top-level properties are reactive.
Nested objects inside remain non-reactive.
Changing nested properties does NOT trigger updates.
Replacing top-level nested objects triggers reactivity.
Use reactive for deep reactivity.

Full Transcript

This lesson shows how Vue's shallowRef and shallowReactive work by tracking only top-level changes reactively. When you create a shallowReactive object, changes to its direct properties trigger updates, but changes inside nested objects do not. For example, changing state.count triggers reactivity, but changing state.user.name does not. However, if you replace the entire nested object state.user, that triggers reactivity because the top-level property changed. This helps optimize performance when you don't need deep reactivity. To track nested changes reactively, use reactive instead of shallowReactive.

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