Computed in Composition API in Vue - Step-by-Step Execution

Concept Flow - Computed in Composition API

Define reactive state with ref/reactive

↓

Create computed property using computed()

↓

Access computed property in template or code

↓

Computed auto-updates when dependencies change

↓

View reflects updated computed value

This flow shows how a reactive state is defined, a computed property is created based on it, and how the computed value updates automatically when the reactive state changes.

Execution Sample

Vue

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

This code creates a reactive count and a computed double that doubles count. It logs double before and after changing count.

Execution Table

Step	Action	count.value	double.value	Explanation
1	Initialize count with 1	1	undefined	count is reactive with initial value 1, double not yet accessed
2	Create computed double	1	undefined	double is defined but not accessed yet, no value cached
3	Access double.value first time	1	2	double computes 1 * 2 = 2 and caches it
4	Change count.value to 3	3	2	count changes, double cache invalidated but not recomputed yet
5	Access double.value again	3	6	double recomputes 3 * 2 = 6 and caches new value

💡 Execution ends after logging updated double.value showing reactive update

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5
count.value	1	1	3	3
double.value	undefined	2	2	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. After count.value changes (Step 4), double.value still holds old cached value until we access it again (Step 5), which triggers recomputation.

What happens the first time we access double.value?

The computed function runs and calculates the value based on current count.value, then caches it. This is shown in Step 3 where double.value becomes 2.

Visual Quiz - 3 Questions

Look at the execution table, what is double.value at Step 3?

A 1

B 2

C undefined

D 3

💡 Hint

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

At which step does count.value change to 3?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look at the 'count.value' column changes in the execution_table

If we never access double.value after changing count.value, what happens to double.value?

A It updates automatically to new value

B It becomes undefined

C It stays cached at old value

D It throws an error

💡 Hint

Refer to Step 4 in execution_table where count.value changes but double.value remains the same until accessed

Concept Snapshot

Computed in Composition API:
- Use computed(() => ...) to create derived reactive values.
- Computed caches result until dependencies change.
- Access computed.value to get current value.
- Updates happen lazily on access after dependency changes.
- Helps keep UI in sync with reactive state efficiently.

Full Transcript

This visual execution shows how Vue's Composition API computed properties work. We start by defining a reactive variable 'count' with initial value 1. Then we create a computed property 'double' that doubles count's value. Initially, double.value is not computed. When we first access double.value, it calculates and caches the value 2. When count.value changes to 3, double.value cache is invalidated but not recomputed until accessed again. On next access, double.value updates to 6. This lazy update and caching behavior helps Vue optimize reactive updates. Key points include understanding when computed values recalculate and how caching works.

Practice

1. What is the main purpose of computed properties in Vue's Composition API?

easy

A. To store static data that never changes

B. To define methods that run only once

C. To replace the data option in Options API

D. To create reactive values that update automatically when dependencies change

Solution

1. Step 1: Understand computed properties role

   Computed properties are reactive and update automatically when their dependencies change.

2. Step 2: Compare with other options

   Methods run on demand, static data doesn't update, and computed doesn't replace data but complements it.

3. Final Answer:

   To create reactive values that update automatically when dependencies change -> Option D

4. Quick Check:

   Computed = reactive auto-update [OK]

Hint: Computed = reactive values that auto-update [OK]

Common Mistakes:

• Confusing computed with methods
• Thinking computed stores static data
• Believing computed replaces data option

2. Which of the following is the correct syntax to create a computed property named fullName inside setup()?

easy

A. const fullName = computed(() => firstName + ' ' + lastName);

B. const fullName = computed { return firstName + ' ' + lastName };

C. const fullName = computed(function() { firstName + ' ' + lastName });

D. const fullName = computed(() => { firstName + ' ' + lastName });

Solution

1. Step 1: Recall computed syntax

   Computed takes a function returning a value, usually an arrow function with parentheses and curly braces if needed.

2. Step 2: Check each option

   const fullName = computed(() => fullName + ' ' + lastName); uses arrow function with parentheses and returns expression correctly. const fullName = computed { return firstName + ' ' + lastName }; misses parentheses and arrow. const fullName = computed(function() { firstName + ' ' + lastName }); lacks return statement. const fullName = computed(() => { firstName + ' ' + lastName }); has curly braces but no return, so returns undefined.

3. Final Answer:

   const fullName = computed(() => firstName + ' ' + lastName); -> Option A

4. Quick Check:

   Correct arrow function syntax = const fullName = computed(() => firstName + ' ' + lastName); [OK]

Hint: Use arrow function with parentheses and return expression [OK]

Common Mistakes:

• Omitting parentheses in arrow function
• Forgetting return statement with curly braces
• Using wrong function syntax inside computed

3. Given the code inside setup():

const count = ref(2);
const double = computed(() => count.value * 2);
count.value = 5;
console.log(double.value);

What will be logged to the console?

medium

A. 2

B. 5

C. 10

D. 4

Solution

1. Step 1: Understand reactive refs and computed

   Initially, count.value is 2, so double.value is 4. Then count.value is updated to 5.

2. Step 2: Compute updated value

   Computed property recalculates automatically: 5 * 2 = 10.

3. Final Answer:

   10 -> Option C

4. Quick Check:

   Updated count * 2 = 10 [OK]

Hint: Computed updates automatically when dependencies change [OK]

Common Mistakes:

• Thinking computed doesn't update after ref changes
• Confusing count value with computed value
• Ignoring .value when accessing refs

4. Identify the error in this computed property code inside setup():

const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => {
  firstName + ' ' + lastName
});

medium

A. Missing return statement inside computed function

B. Refs should not be used inside computed

C. Computed must be declared outside setup()

D. firstName and lastName should not be refs

Solution

1. Step 1: Analyze computed function body

   The function uses curly braces but does not return any value explicitly.

2. Step 2: Understand arrow function behavior

   With curly braces, arrow functions need an explicit return; otherwise, they return undefined.

3. Final Answer:

   Missing return statement inside computed function -> Option A

4. Quick Check:

   Curly braces need return [OK]

Hint: Use return with curly braces in arrow functions [OK]

Common Mistakes:

• Omitting return in arrow function with braces
• Thinking refs can't be used in computed
• Believing computed must be outside setup

5. You want to create a computed property statusMessage that returns "Active" if isActive is true, "Inactive" if false, and "Unknown" if isActive is null or undefined. Which code correctly implements this inside setup()?

hard

A. const statusMessage = computed(() => isActive.value ? 'Active' : 'Inactive');

B. const statusMessage = computed(() => isActive.value === true ? 'Active' : isActive.value === false ? 'Inactive' : 'Unknown');

C. const statusMessage = computed(() => { if (isActive.value) return 'Active'; else return 'Inactive'; });

D. const statusMessage = computed(() => isActive ? 'Active' : 'Inactive');

Solution

1. Step 1: Understand the conditions

   We need to check three cases: true, false, and null/undefined (unknown).

2. Step 2: Evaluate each option

   const statusMessage = computed(() => isActive.value ? 'Active' : 'Inactive'); only handles true/false, ignoring null/undefined. const statusMessage = computed(() => isActive.value === true ? 'Active' : isActive.value === false ? 'Inactive' : 'Unknown'); uses nested ternary to cover all three cases correctly. const statusMessage = computed(() => { if (isActive.value) return 'Active'; else return 'Inactive'; }); misses the unknown case and uses if-else without else if. const statusMessage = computed(() => isActive ? 'Active' : 'Inactive'); checks isActive directly without .value and misses unknown case.

3. Final Answer:

   const statusMessage = computed(() => isActive.value === true ? 'Active' : isActive.value === false ? 'Inactive' : 'Unknown'); -> Option B

4. Quick Check:

   All cases handled with nested ternary [OK]

Hint: Use nested ternary to cover all true, false, unknown cases [OK]

Common Mistakes:

• Ignoring null or undefined cases
• Not using .value to access ref
• Using simple if-else missing else if