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

Need a 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

Need a 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

Need a 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'



  
  

Need a hint?

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