Reactive Map and Set in Vue

Introduction

Reactive Map and Set let Vue track changes in these collections so your app updates automatically when data changes.

You want to store unique items and react to additions or removals.

You need a key-value store that updates the UI when values change.

You want to manage complex state with Map or Set and keep your UI in sync.

You are building a list of selected items that can change dynamically.

You want to react to changes in a collection without manually updating the UI.

Syntax

Vue

import { reactive } from 'vue';

const reactiveMap = reactive(new Map());
const reactiveSet = reactive(new Set());

Use reactive() to wrap a Map or Set to make it reactive.

Vue tracks changes like adding, deleting, or clearing items.

Examples

This creates a reactive Map and adds a key-value pair.

Vue

import { reactive } from 'vue';

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

This creates a reactive Set and adds an item.

Vue

import { reactive } from 'vue';

const set = reactive(new Set());
set.add('item');

You can delete keys from Map or clear all items from Set reactively.

Vue

map.delete('key');
set.clear();

Sample Program

This Vue component shows how to use reactive Map and Set. Clicking buttons adds entries or items, and the lists update automatically.

Vue

<template>
  <div>
    <h2>Reactive Map Example</h2>
    <button @click="addEntry">Add Entry</button>
    <ul>
      <li v-for="(value, key) in reactiveMap" :key="key">
        {{ key }}: {{ value }}
      </li>
    </ul>

    <h2>Reactive Set Example</h2>
    <button @click="addItem">Add Item</button>
    <ul>
      <li v-for="item in reactiveSet" :key="item">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const reactiveMap = reactive(new Map());
const reactiveSet = reactive(new Set());

let mapCount = 1;
let setCount = 1;

function addEntry() {
  reactiveMap.set(`key${mapCount}`, `value${mapCount}`);
  mapCount++;
}

function addItem() {
  reactiveSet.add(`item${setCount}`);
  setCount++;
}
</script>

Important Notes

When iterating reactive Map or Set in templates, use v-for directly on them.

Vue tracks mutations like set, add, delete, and clear.

Do not replace the whole Map or Set; mutate it to keep reactivity.

Summary

Wrap Map or Set with reactive() to make them reactive in Vue.

Mutations to reactive Map or Set update the UI automatically.

Use v-for to loop over reactive Map or Set in templates.

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