Shallow ref and shallow reactive in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a shallowRef in Vue?

shallowRef creates a reactive reference that tracks changes only to the top-level value, not nested properties.

This means if you change a nested object inside it, Vue won't detect that change automatically.

beginner

How does shallowReactive differ from reactive in Vue?

shallowReactive makes only the first level of an object reactive.

Nested objects inside it are not reactive, unlike reactive which makes all nested properties reactive.

intermediate

Why use shallowRef or shallowReactive instead of full reactivity?

They improve performance by avoiding deep tracking of nested properties.

Useful when you don't need to react to changes inside nested objects or when working with large data structures.

intermediate

What happens if you update a nested property inside a shallowReactive object?

Vue will NOT detect the change and will not trigger updates.

You need to replace the whole nested object or use a fully reactive object to track nested changes.

beginner

Show a simple example of creating a shallowRef and updating its nested property.

<pre>import { shallowRef } from 'vue';

const state = shallowRef({ count: 0, nested: { value: 10 } });

// Updating nested property
state.value.nested.value = 20; // Vue will NOT detect this change

// Updating top-level property
state.value = { count: 1, nested: { value: 20 } }; // Vue detects this change</pre>

What does shallowRef track reactively in Vue?

A No changes at all

B All nested property changes

C Only the top-level value changes

D Only array changes

shallowRef tracks only the top-level value changes, not nested properties.

Which Vue function makes only the first level of an object reactive?

A shallowReactive

B computed

C ref

D reactive

shallowReactive makes only the first level reactive, unlike reactive which is deep.

If you update a nested property inside a shallowReactive object, what happens?

A Vue detects and updates the UI

B Vue ignores the change

C Vue throws an error

D Vue reloads the page

Vue ignores nested changes in shallowReactive objects.

Why might you choose shallowRef over ref?

A To track deep nested changes

B To automatically watch all nested arrays

C To disable reactivity completely

D To improve performance by avoiding deep tracking

shallowRef improves performance by avoiding deep reactivity.

Which of these is true about shallowReactive?

A It only tracks changes on the first level

B It disables all reactivity

C It makes nested objects reactive

D It works only with arrays

shallowReactive tracks only first-level changes, not nested ones.

Explain in your own words what shallowRef and shallowReactive do in Vue and when you might use them.

Think about how deep Vue normally tracks changes and how shallow versions limit that.

Describe what happens if you update a nested property inside a shallowReactive object and how you can work around it.

Consider Vue's reactivity system and how shallow reactivity limits detection.