Reactive Map and Set in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does it mean for a Map or Set to be reactive in Vue?

A reactive Map or Set in Vue automatically updates the UI or any dependent code when its contents change, just like reactive objects or arrays.

beginner

How do you create a reactive Map in Vue 3.4+?

Use reactive(new Map()) to create a reactive Map that Vue tracks for changes.

beginner

How do you add an item to a reactive Set in Vue?

Use the Set's add() method on the reactive Set, for example: mySet.add(value). Vue will track this change.

intermediate

Why should you avoid replacing a reactive Map or Set with a new instance?

Replacing a reactive Map or Set with a new instance breaks reactivity because Vue tracks the original object. Instead, modify the existing Map or Set.

intermediate

How can you watch changes in a reactive Map or Set in Vue?

Use Vue's watch() function on the reactive Map or Set. It tracks changes like additions or deletions and runs your callback.

How do you make a Map reactive in Vue 3.4+?

A ref(new Map())

B computed(() => new Map())

C reactive(new Map())

D shallowReactive(new Map())

Using reactive(new Map()) creates a fully reactive Map that Vue tracks for changes.

Which method adds an item to a reactive Set in Vue?

A push()

B add()

C set()

D append()

Sets use the add() method to add items.

What happens if you replace a reactive Map with a new Map instance?

A Vue merges both Maps

B Vue tracks both Maps

C Reactivity continues normally

D Reactivity breaks for the new Map

Replacing the reactive Map breaks reactivity because Vue tracks the original object only.

How can you detect changes in a reactive Set?

A Using watch() on the Set

B Using computed() on the Set

C Using ref() on the Set

D Using toRaw() on the Set

watch() tracks changes like additions or deletions in reactive Sets.

Which Vue function creates a reactive object that tracks Map and Set changes?

A reactive()

B ref()

C readonly()

D shallowRef()

reactive() creates deep reactivity, including for Map and Set.

Explain how Vue makes a Map or Set reactive and why this is useful.

Think about how Vue tracks changes and updates the interface.

Describe how you would watch for changes in a reactive Set and respond to them.

Consider Vue's watch API and how it works with reactive collections.