Reactive Map and Set in Vue - Step-by-Step Execution

Concept Flow - Reactive Map and Set

Create reactive Map or Set

↓

Use reactive methods (get, set, add, delete)

↓

Vue tracks dependencies

↓

When Map/Set changes

↓

Trigger reactive updates

↓

Component re-renders with new data

This flow shows how Vue tracks changes in reactive Map or Set and updates the component automatically.

Execution Sample

Vue

import { reactive } from 'vue';
const map = reactive(new Map());
map.set('key', 'value');
console.log(map.get('key'));
map.set('key', 'new');
console.log(map.get('key'));

This code creates a reactive Map, sets and updates a key, and logs the values showing reactivity.

Execution Table

Step	Action	Map Content	Reactive Effect	Console Output
1	Create reactive Map	{}	No update yet
2	map.set('key', 'value')	{'key' => 'value'}	Triggers reactive tracking
3	console.log(map.get('key'))	{'key' => 'value'}	No change	value
4	map.set('key', 'new')	{'key' => 'new'}	Triggers reactive update
5	console.log(map.get('key'))	{'key' => 'new'}	No change	new

💡 No more actions, reactive Map updates tracked and logged values reflect changes.

Variable Tracker

Variable	Start	After 2	After 4	Final
map	{}	{'key' => 'value'}	{'key' => 'new'}	{'key' => 'new'}

Key Moments - 2 Insights

Why does changing the value for an existing key trigger a reactive update?

Because Vue tracks the Map's internal changes, so when map.set updates a key's value (see step 4), it triggers reactive updates to re-render components.

Does reading a value with map.get trigger a reactive update?

No, reading with map.get (steps 3 and 5) does not trigger updates; it only tracks dependencies so Vue knows when to update if the Map changes.

Visual Quiz - 3 Questions

Look at the execution table at step 3, what is the console output?

A undefined

B 'new'

C 'value'

D Error

💡 Hint

Check the 'Console Output' column at step 3 in the execution_table.

At which step does the reactive update get triggered after changing a Map value?

A Step 4

B Step 2

C Step 3

D Step 5

💡 Hint

Look at the 'Reactive Effect' column for when the update triggers after map.set.

If we add a new key instead of updating, how would the Map content change at step 4?

A {'key' => 'new'}

B {'key' => 'value', 'newKey' => 'newValue'}

C {}

D {'newKey' => 'newValue'}

💡 Hint

Adding a new key keeps existing keys and adds the new one, check variable_tracker for Map content.

Concept Snapshot

Reactive Map and Set in Vue:
- Use reactive() to wrap Map or Set.
- Use standard Map/Set methods (set, get, add, delete).
- Vue tracks changes internally.
- Changes trigger reactive updates.
- Reading values tracks dependencies but does not trigger updates.

Full Transcript

This lesson shows how Vue makes Map and Set reactive. First, you create a reactive Map or Set using Vue's reactive() function. Then, when you use methods like set or add to change the Map or Set, Vue tracks these changes. When a value changes, Vue triggers reactive updates so components using this data re-render automatically. Reading values with get or has tracks dependencies but does not cause updates. The execution table shows step-by-step how the Map changes and when reactive updates happen. This helps beginners see how Vue's reactivity works with Map and Set.