Readonly for immutable reactive data in Vue - Step-by-Step Execution

Concept Flow - Readonly for immutable reactive data

Create reactive data

↓

Wrap with readonly()

↓

Use readonly data in template or logic

↓

Attempt to modify readonly data

↓

Vue warns and blocks mutation

↓

Data remains unchanged

This flow shows how Vue creates reactive data, wraps it as readonly to prevent changes, and blocks any mutation attempts while keeping data reactive.

Execution Sample

Vue

import { reactive, readonly } from 'vue';
const state = reactive({ count: 0 });
const readOnlyState = readonly(state);
readOnlyState.count = 5; // blocked
console.log(readOnlyState.count);

This code creates reactive state, wraps it as readonly, tries to change it (which is blocked), and logs the unchanged value.

Execution Table

Step	Action	Value Before	Attempted Change	Result	Value After
1	Create reactive state	N/A	N/A	state = { count: 0 } reactive	{ count: 0 }
2	Wrap state with readonly()	{ count: 0 }	N/A	readOnlyState is readonly proxy	{ count: 0 }
3	Attempt to set readOnlyState.count = 5	{ count: 0 }	count = 5	Mutation blocked, warning shown	{ count: 0 }
4	Read readOnlyState.count	{ count: 0 }	N/A	Returns 0	0

💡 Mutation blocked by readonly proxy, so value remains unchanged

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
state	undefined	{ count: 0 } reactive	{ count: 0 } reactive	{ count: 0 } reactive	{ count: 0 } reactive
readOnlyState	undefined	undefined	readonly proxy of state	readonly proxy of state	readonly proxy of state

Key Moments - 2 Insights

Why can't we change the value of readOnlyState.count even though state is reactive?

Because readOnlyState is a readonly proxy that blocks any mutation attempts, as shown in step 3 of the execution_table where the mutation is blocked and a warning is shown.

Does readonly() make the data non-reactive?

No, readonly() keeps the data reactive but prevents changes. The value can still be read and will update if the original reactive state changes.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of readOnlyState.count after step 3?

A 5

B undefined

C 0

D Error

💡 Hint

Check the 'Value After' column in step 3 of the execution_table

At which step does Vue block the mutation attempt?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'Result' column describing mutation blocking

If we change the original state.count to 10, what happens to readOnlyState.count?

A It stays 0

B It updates to 10

C It becomes readonly and stops updating

D It throws an error

💡 Hint

readonly() keeps reactivity, so changes in state reflect in readOnlyState

Concept Snapshot

readonly() wraps reactive data to prevent changes.
It blocks mutations but keeps data reactive.
Use readonly() to share immutable state safely.
Mutation attempts warn and do not change data.
Reading readonly data works normally.

Full Transcript

In Vue, readonly() creates an immutable reactive proxy around reactive data. This means you can read the data and it updates reactively, but any attempt to change it is blocked and warned. The flow starts by creating reactive data, then wrapping it with readonly(). When you try to modify the readonly data, Vue stops the change and keeps the original value. This helps share data safely without accidental changes. The execution table shows each step: creating reactive state, wrapping it readonly, trying to mutate (blocked), and reading the value. The variable tracker shows state and readonly proxy values over time. Key moments clarify why mutation is blocked and that readonly data remains reactive. The quiz tests understanding of value changes and mutation blocking. Overall, readonly() is a simple way to protect reactive data from unwanted changes while keeping reactivity intact.