Computed properties for derived state in Vue - Step-by-Step Execution

Concept Flow - Computed properties for derived state

Define reactive state

↓

Create computed property

↓

Access computed property

↓

Computed property auto-updates

↓

UI reflects updated computed value

Start with reactive state, define a computed property based on it, then when state changes, computed updates automatically and UI shows new value.

Execution Sample

Vue

import { ref, computed } from 'vue'
const count = ref(1)
const double = computed(() => count.value * 2)
count.value = 3
console.log(double.value)

This code creates a reactive count, a computed double that doubles count, then updates count and logs the updated double.

Execution Table

Step	Action	count.value	double.value	Explanation
1	Initialize count with 1	1	2	double computes 1 * 2 = 2
2	Access double.value first time	1	2	Computed caches value 2
3	Update count.value to 3	3	2	double not recomputed yet, still cached 2
4	Access double.value after count change	3	6	Computed recalculates 3 * 2 = 6
5	Log double.value	3	6	Output is 6, reflecting updated count

💡 Execution ends after logging updated computed value reflecting reactive state change

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 4	Final
count.value	undefined	1	3	3	3
double.value	undefined	2	2	6	6

Key Moments - 2 Insights

Why does double.value not update immediately when count.value changes?

Because computed properties cache their value until accessed again. See step 3 and 4 in execution_table where double.value stays 2 until accessed after count changes.

What triggers the computed property to recalculate?

Accessing the computed property after its dependencies change triggers recalculation, as shown in step 4 where accessing double.value after count.value changed updates it.

Visual Quiz - 3 Questions

Look at the execution table, what is double.value at Step 3 after count.value changes but before double.value is accessed again?

A 6

B 3

C 2

D Undefined

💡 Hint

Check the double.value column at Step 3 in the execution_table

At which step does double.value recalculate to reflect the new count.value?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look for when double.value changes from 2 to 6 in the execution_table

If count.value was updated to 5 instead of 3 at Step 3, what would double.value be at Step 4?

A 10

B 5

C 6

D 3

💡 Hint

Recall double.value is count.value * 2, see variable_tracker for pattern

Concept Snapshot

Computed properties in Vue automatically update when their reactive dependencies change.
They cache their value until accessed again.
Syntax: const comp = computed(() => reactiveVar.value * 2)
Access with comp.value to get latest derived state.
Useful for keeping UI in sync without manual updates.

Full Transcript

This example shows how Vue's computed properties work. We start with a reactive variable count initialized to 1. Then we define a computed property double that doubles count's value. Initially, double.value is 2. When we update count.value to 3, double.value does not change immediately because computed caches its value. Only when we access double.value again does it recalculate to 6. This automatic caching and recalculation keeps derived state efficient and reactive. The execution table traces each step, showing how count and double values change. Key points include understanding when computed recalculates and how caching works. This helps keep UI components updated automatically when underlying reactive data changes.