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.