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.

Practice

1. Which Vue function should you use to make a Map reactive so that UI updates when it changes?

easy

A. computed()

B. ref()

C. watch()

D. reactive()

Solution

1. Step 1: Understand Vue reactivity basics

   Vue's reactive() wraps objects like Map or Set to track changes.

2. Step 2: Identify correct function for Map reactivity

   Only reactive() can wrap Map to make it reactive, so UI updates on mutations.

3. Final Answer:

   reactive() -> Option D

4. Quick Check:

   Wrap Map with reactive() = C [OK]

Hint: Use reactive() to wrap Map or Set for reactivity [OK]

Common Mistakes:

• Using ref() which works for primitives, not Map/Set
• Confusing computed() with reactive()
• Trying watch() to make Map reactive

2. Which of the following is the correct syntax to create a reactive Set in Vue?

easy

A. const mySet = reactive(new Set())

B. const mySet = ref(new Set())

C. const mySet = reactive(Set())

D. const mySet = reactive([])

Solution

1. Step 1: Check how to create reactive Set

   You must create a new Set instance and wrap it with reactive().

2. Step 2: Identify correct syntax

   reactive(new Set()) is correct; Set() without new is invalid, and ref() wraps primitives.

3. Final Answer:

   const mySet = reactive(new Set()) -> Option A

4. Quick Check:

   Use new Set() inside reactive() = B [OK]

Hint: Always use new Set() inside reactive() for reactive Sets [OK]

Common Mistakes:

• Omitting new keyword for Set
• Using ref() instead of reactive() for Set
• Wrapping an array instead of Set

3. Given this Vue setup:

const myMap = reactive(new Map());
myMap.set('a', 1);
myMap.set('b', 2);
myMap.delete('a');
console.log([...myMap.keys()]);

What will be logged to the console?

medium

A. ['b']

B. ['a', 'b']

C. []

D. ['a']

Solution

1. Step 1: Track Map mutations

   Initially, keys 'a' and 'b' are added. Then 'a' is deleted.

2. Step 2: Determine final keys

   After deletion, only 'b' remains as a key in the Map.

3. Final Answer:

   ['b'] -> Option A

4. Quick Check:

   Deleted 'a', keys left = ['b'] [OK]

Hint: Deleting a key removes it from Map keys list [OK]

Common Mistakes:

• Forgetting the delete call removes 'a'
• Assuming keys remain unchanged after mutation
• Confusing keys() with values()

4. What is wrong with this Vue code that tries to make a reactive Map?

const myMap = reactive(Map());
myMap.set('key', 'value');

medium

A. reactive() cannot wrap Map

B. Map() must be called with new keyword

C. set() method does not exist on Map

D. Missing ref() wrapper

Solution

1. Step 1: Check Map instantiation syntax

   Map must be created with new Map(), not just Map().

2. Step 2: Identify error cause

   Calling Map() without new causes a TypeError or unexpected behavior.

3. Final Answer:

   Map() must be called with new keyword -> Option B

4. Quick Check:

   Use new Map() to create Map instance [OK]

Hint: Always use new Map() to create Map instances [OK]

Common Mistakes:

• Omitting new keyword for Map
• Thinking reactive() can't wrap Map
• Using ref() instead of reactive()

5. You have a reactive Set in Vue:

const mySet = reactive(new Set(['apple', 'banana']));

// Later in code
mySet.add('banana');
mySet.delete('apple');

const items = [...mySet];

What will be the value of items after these operations?

hard

A. ['apple', 'banana', 'banana']

B. ['banana', 'apple']

C. ['banana']

D. ['apple']

Solution

1. Step 1: Understand Set behavior with duplicates

   Sets only store unique values, so adding 'banana' again does nothing.

2. Step 2: Track mutations

   Initially contains 'apple' and 'banana'. After deleting 'apple', only 'banana' remains.

3. Final Answer:

   ['banana'] -> Option C

4. Quick Check:

   Set keeps unique items, deleted 'apple' = ['banana'] [OK]

Hint: Sets ignore duplicate adds and remove items on delete [OK]

Common Mistakes:

• Assuming duplicates appear in Set
• Forgetting delete removes item
• Confusing Set with Array behavior