Reactive Map and Set in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive Map in Vue.

Vue

import { reactive } from 'vue';
const myMap = reactive(new [1]());

Drag options to blanks, or click blank then click option'

AMap

BSet

CArray

DObject

Attempts:

3 left

💡 Hint

Common Mistakes

Using Set instead of Map

Using Object instead of Map

We use Map to create a reactive map object in Vue.

2fill in blank

medium

Complete the code to add a key-value pair to a reactive Map.

Vue

myMap.[1]('name', 'Vue');

Drag options to blanks, or click blank then click option'

Aset

Bpush

Cadd

Dappend

Attempts:

3 left

💡 Hint

Common Mistakes

Using add instead of set

Using push which is for arrays

The set method adds or updates a key-value pair in a Map.

3fill in blank

hard

Fix the error in the code to check if a reactive Set contains a value.

Vue

const mySet = reactive(new Set());
const hasValue = mySet.[1]('Vue');

Drag options to blanks, or click blank then click option'

Acontains

Bincludes

Chas

Dfind

Attempts:

3 left

💡 Hint

Common Mistakes

Using contains which is not a Set method

Using includes which is for arrays

The correct method to check if a Set contains a value is has.

4fill in blank

hard

Fill both blanks to create a reactive Map and add a key-value pair.

Vue

import { reactive } from 'vue';
const map = reactive(new [1]());
map.[2]('framework', 'Vue');

Drag options to blanks, or click blank then click option'

AMap

BSet

Cset

Dadd

Attempts:

3 left

💡 Hint

Common Mistakes

Using Set instead of Map

Using add instead of set

Use Map to create the reactive map and set to add a key-value pair.

5fill in blank

hard

Fill all three blanks to create a reactive Set, add a value, and check if it exists.

Vue

import { reactive } from 'vue';
const set = reactive(new [1]());
set.[2]('Vue');
const exists = set.[3]('Vue');

Drag options to blanks, or click blank then click option'

AMap

BSet

Cadd

Dhas

Attempts:

3 left

💡 Hint

Common Mistakes

Using Map instead of Set

Using set instead of add

Using contains instead of has

Create a reactive Set, use add to add a value, and has to check if it exists.

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