Shallow ref and shallow reactive in Vue - Mini Project: Build & Apply

Shallow ref and shallow reactive in Vue

📖 Scenario: You are building a simple Vue app to manage a user's profile information. The profile has nested details like name and address. You want to understand how shallow ref and shallow reactive work to control reactivity on nested objects.

🎯 Goal: Create a Vue component that uses shallowRef and shallowReactive to hold a user profile object. Update nested properties and observe how reactivity behaves differently with shallow wrappers.

📋 What You'll Learn

Create a shallowRef holding a user profile object with nested properties

Create a shallowReactive holding a user profile object with nested properties

Update a nested property inside the shallowRef object

Update a nested property inside the shallowReactive object

Add template code to display the user name and address from both shallowRef and shallowReactive

💡 Why This Matters

🌍 Real World

Managing complex state objects in Vue apps where you want to optimize performance by limiting deep reactivity.

💼 Career

Understanding shallowRef and shallowReactive helps frontend developers write efficient Vue components and avoid unnecessary re-renders.

1

Setup user profile data with shallowRef

In the <script setup> block, import shallowRef from 'vue'. Create a variable called userShallowRef using shallowRef with this exact object: { name: 'Alice', address: { city: 'Wonderland', zip: '12345' } }.

Vue

// Create shallowRef userShallowRef with the given object
// Your code here

Hint

Use import { shallowRef } from 'vue' and then const userShallowRef = shallowRef(...) with the exact object.

2

Add shallowReactive user profile data

Import shallowReactive from 'vue'. Create a variable called userShallowReactive using shallowReactive with this exact object: { name: 'Bob', address: { city: 'Builderland', zip: '54321' } }.

Vue

import { shallowRef, shallowReactive } from 'vue'

const userShallowRef = shallowRef({ name: 'Alice', address: { city: 'Wonderland', zip: '12345' } })

// Create shallowReactive userShallowReactive with the given object
// Your code here

Hint

Import shallowReactive and create userShallowReactive with the exact object.

3

Update nested properties in shallowRef and shallowReactive

Update the city property inside the address of userShallowRef.value to 'New Wonderland'. Also update the city property inside the address of userShallowReactive to 'New Builderland'.

Vue

import { shallowRef, shallowReactive } from 'vue'

const userShallowRef = shallowRef({ name: 'Alice', address: { city: 'Wonderland', zip: '12345' } })

const userShallowReactive = shallowReactive({ name: 'Bob', address: { city: 'Builderland', zip: '54321' } })

// Update nested city in userShallowRef.value.address
// Update nested city in userShallowReactive.address
// Your code here

Hint

Remember to update nested properties inside userShallowRef.value and userShallowReactive.

4

Add template to display user names and cities

Add a <template> block that displays the name and address.city for both userShallowRef.value and userShallowReactive. Use {{ userShallowRef.value.name }} and {{ userShallowRef.value.address.city }} for shallowRef, and {{ userShallowReactive.name }} and {{ userShallowReactive.address.city }} for shallowReactive.

Vue

import { shallowRef, shallowReactive } from 'vue'

const userShallowRef = shallowRef({ name: 'Alice', address: { city: 'Wonderland', zip: '12345' } })

const userShallowReactive = shallowReactive({ name: 'Bob', address: { city: 'Builderland', zip: '54321' } })

userShallowRef.value.address.city = 'New Wonderland'
userShallowReactive.address.city = 'New Builderland'



  
  

Hint

Use mustache syntax inside the template to show the names and cities from both objects.

Practice

1. What does shallowRef in Vue track reactively?

easy

A. All nested properties deeply inside the object

B. Only primitive values inside the object

C. Only changes to the reference itself, not nested properties

D. Changes only to arrays, not objects

Solution

1. Step 1: Understand shallowRef behavior

   shallowRef tracks reactivity only when the reference changes, not inside nested objects.

2. Step 2: Compare with deep reactivity

   Unlike ref or reactive, it does not track nested property changes.

3. Final Answer:

   Only changes to the reference itself, not nested properties -> Option C

4. Quick Check:

   shallowRef tracks reference, not deep changes [OK]

Hint: shallowRef tracks only the outer reference change [OK]

Common Mistakes:

• Thinking shallowRef tracks nested property changes
• Confusing shallowRef with reactive
• Assuming shallowRef tracks primitive values inside

2. Which of the following is the correct way to create a shallow reactive object in Vue?

easy

A. const state = reactive({ count: 0, nested: { value: 1 } })

B. const state = shallowReactive({ count: 0, nested: { value: 1 } })

C. const state = shallowRef({ count: 0, nested: { value: 1 } })

D. const state = ref({ count: 0, nested: { value: 1 } })

Solution

1. Step 1: Identify shallow reactive syntax

   shallowReactive is used to create a shallow reactive object that tracks only top-level properties.

2. Step 2: Differentiate from other APIs

   reactive creates deep reactivity, shallowRef and ref create refs, not shallow reactive objects.

3. Final Answer:

   const state = shallowReactive({ count: 0, nested: { value: 1 } }) -> Option B

4. Quick Check:

   shallowReactive creates shallow reactive objects [OK]

Hint: Use shallowReactive() for shallow reactive objects [OK]

Common Mistakes:

• Using reactive() instead of shallowReactive()
• Confusing shallowRef with shallowReactive
• Using ref() for reactive objects

3. Given the code:

const state = shallowReactive({ count: 0, nested: { value: 1 } });

state.nested.value = 2;
console.log(state.nested.value);

What will be logged to the console?

medium

A. Error: Cannot assign to nested property

B. 1

C. undefined

D. 2

Solution

1. Step 1: Understand shallowReactive behavior

   shallowReactive tracks only top-level properties reactively, but nested objects still exist and can be mutated normally.

2. Step 2: Check nested property assignment

   Assigning state.nested.value = 2 changes the nested object property directly, so the value updates.

3. Final Answer:

   2 -> Option D

4. Quick Check:

   Nested objects update but are not reactive [OK]

Hint: shallowReactive allows nested mutation but no reactivity inside [OK]

Common Mistakes:

• Assuming nested changes are not possible
• Expecting nested changes to trigger reactivity
• Thinking assignment causes error

4. What is the problem with this code snippet?

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

state.value.nested.value = 5;
console.log(state.value.nested.value);

medium

A. Nested property change won't trigger reactivity

B. Syntax error due to incorrect property access

C. state.value is undefined

D. Cannot assign to nested property inside shallowRef

Solution

1. Step 1: Analyze shallowRef behavior

   shallowRef tracks only changes to the reference itself, not nested properties inside the object.

2. Step 2: Understand nested mutation effect

   Changing state.value.nested.value updates the nested property but does not trigger Vue reactivity updates.

3. Final Answer:

   Nested property change won't trigger reactivity -> Option A

4. Quick Check:

   shallowRef ignores nested property changes [OK]

Hint: shallowRef ignores nested changes, only tracks reference [OK]

Common Mistakes:

• Expecting nested changes to trigger updates
• Confusing shallowRef with reactive
• Thinking this causes syntax or runtime errors

5. You want to optimize performance by tracking only top-level changes in a complex object with nested data. Which approach correctly combines shallow reactivity with a watch to detect nested changes manually?

const state = shallowReactive({ user: { name: 'Alice', age: 30 } });

watch(() => state.user, (newVal, oldVal) => {
  console.log('User changed:', newVal);
});

state.user.name = 'Bob';

What is the expected behavior?

hard

A. The watch callback runs only if state.user is replaced entirely

B. The watch callback runs immediately when state.user.name changes

C. The watch callback will run when state.user.name changes

D. The watch callback runs twice for nested changes

Solution

1. Step 1: Understand shallowReactive and watch

   shallowReactive tracks only top-level properties reactively. The watch on state.user triggers only if the user object reference changes.

2. Step 2: Analyze nested property mutation

   Changing state.user.name mutates a nested property but does not replace the user object, so the watch callback does not run.

3. Final Answer:

   The watch callback runs only if state.user is replaced entirely -> Option A

4. Quick Check:

   shallowReactive watches top-level refs only [OK]

Hint: Watch triggers only on reference changes with shallowReactive [OK]

Common Mistakes:

• Expecting watch to detect nested property changes
• Assuming watch runs on every nested mutation
• Confusing shallowReactive with deep reactive