Readonly for immutable reactive data in Vue - Mini Project: Build & Apply

Readonly for immutable reactive data

📖 Scenario: You are building a Vue 3 app that manages user profile data. Some parts of the data should not be changed by child components to avoid accidental updates.

🎯 Goal: Create a reactive user profile object and make it immutable using Vue's readonly function. Then pass this readonly data to a child component to ensure it cannot be modified.

📋 What You'll Learn

Create a reactive object called userProfile with keys name and age and values 'Alice' and 30

Create a readonly version of userProfile called immutableProfile

Use immutableProfile in the template to display the user's name and age

Pass immutableProfile as a prop to a child component called UserCard

💡 Why This Matters

🌍 Real World

In real apps, some data should be protected from changes by child components to avoid bugs. Using readonly helps enforce this immutability.

💼 Career

Understanding reactive and readonly data is essential for Vue developers to manage state safely and build maintainable applications.

1

Create reactive user profile data

Create a reactive object called userProfile with keys name set to 'Alice' and age set to 30 using Vue's reactive function.

Vue

import { reactive } from 'vue'

// Create reactive userProfile object
// Your code here



  

Need a hint?

Use const userProfile = reactive({ name: 'Alice', age: 30 }) to create the reactive object.

2

Create readonly immutable profile

Import Vue's readonly function and create a readonly version of userProfile called immutableProfile.

Vue

import { reactive, readonly } from 'vue'

const userProfile = reactive({ name: 'Alice', age: 30 })

// Create readonly immutableProfile from userProfile
// Your code here



  

Need a hint?

Use const immutableProfile = readonly(userProfile) to create the immutable reactive object.

3

Display immutable profile data in template

Use immutableProfile.name and immutableProfile.age inside the template to display the user's name and age in paragraphs.

Vue

import { reactive, readonly } from 'vue'

const userProfile = reactive({ name: 'Alice', age: 30 })
const immutableProfile = readonly(userProfile)



  
  

Need a hint?

Use mustache syntax like {{ immutableProfile.name }} inside paragraph tags.

4

Pass immutable profile to child component

Create a child component called UserCard and pass immutableProfile as a prop named profile to it in the template.

Vue

import { reactive, readonly } from 'vue'
import UserCard from './UserCard.vue'

const userProfile = reactive({ name: 'Alice', age: 30 })
const immutableProfile = readonly(userProfile)



  Name: {{ immutableProfile.name }}
  Age: {{ immutableProfile.age }}
  
  

Need a hint?

Use <UserCard :profile="immutableProfile" /> to pass the readonly data as a prop.