Computed vs method performance in Vue - Visual Side-by-Side Comparison

Concept Flow - Computed vs method performance

Component Renders

↓

Access Computed Property

↓

Check Cache

↓

Display Value

↓

Access Method

↓

Run Method Function

↓

Return Result

↓

Display Value

When the component renders, accessing a computed property first checks if the cached value exists to reuse it, while calling a method runs the function every time without caching.

Execution Sample

Vue

const count = ref(0);
const doubleComputed = computed(() => count.value * 2);
function doubleMethod() { return count.value * 2; }

// Template uses {{ doubleComputed }} and {{ doubleMethod() }}

Shows a reactive count with a computed property and a method both doubling the count, used in the template.

Execution Table

Step	Action	count.value	Computed Cache	Method Called	Output Computed	Output Method
1	Initial render, count=0	0	0	No	Calculates 0*2=0 and caches	N/A
2	Template accesses computed	0	0	No	Returns cached 0	N/A
3	Template calls method	0	0	Yes	N/A	Calculates 0*2=0
4	count.value increments to 1	1	invalidated	No	N/A	N/A
5	Template accesses computed	1	2	No	Calculates 1*2=2 and caches	N/A
6	Template calls method	1	2	Yes	N/A	Calculates 1*2=2
7	count.value increments to 2	2	invalidated	No	N/A	N/A
8	Template accesses computed	2	4	No	Calculates 2*2=4 and caches	N/A
9	Template calls method	2	4	Yes	N/A	Calculates 2*2=4
10	End of trace	2	4	Yes	4	4

💡 Execution stops after showing how computed caches and method runs on each render and reactive change.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	Final
count.value	0	0	0	1	1	2	2
Computed Cache	empty	0	0	invalidated	2	invalidated	4
Method Called	No	No	Yes	No	Yes	No	Yes
Output Computed	N/A	0	0	2	2	4	4
Output Method	N/A	N/A	0	N/A	2	N/A	4

Key Moments - 3 Insights

Why does the computed property not recalculate every time the template accesses it?

Because computed properties cache their result until their reactive dependencies change, as shown in execution_table rows 2 and 5 where the cached value is reused.

Why does the method run every time it is called in the template?

Methods are regular functions and do not cache results, so they run fresh on every call, as seen in execution_table rows 3, 6, and 9.

What causes the computed cache to invalidate and recalculate?

When a reactive dependency like count.value changes, the computed cache invalidates and recalculates on next access, shown in execution_table rows 4 and 7.

Visual Quiz - 3 Questions

Look at the execution_table at step 5. What is the computed cache value after recalculation?

A 0

B 2

C empty

D 4

💡 Hint

Check the 'Computed Cache' column at step 5 in the execution_table.

At which step does the method first run after count.value changes to 1?

A Step 6

B Step 5

C Step 4

D Step 7

💡 Hint

Look for 'Method Called' marked 'Yes' after count.value changes to 1 in execution_table.

If count.value never changes, how would the computed cache behave?

A It never caches

B It recalculates every time

C It caches once and reuses forever

D It clears cache every render

💡 Hint

Refer to the caching behavior shown in execution_table steps 1 and 2.

Concept Snapshot

Computed properties cache their results and only recalculate when dependencies change.
Methods run fresh every time they are called.
Use computed for expensive or repeated calculations.
Use methods for simple or event-driven calculations.
Computed improves performance by avoiding unnecessary recalculations.

Full Transcript

This visual trace shows how Vue's computed properties cache their results and only recalculate when reactive dependencies like count.value change. Methods, in contrast, run their function every time they are called in the template without caching. The execution table tracks count.value changes, computed cache state, method calls, and outputs step-by-step. Key moments clarify why computed properties improve performance by caching and when caches invalidate. The quiz tests understanding of cache values and method calls referencing the execution table. This helps beginners see the difference in behavior and performance between computed properties and methods in Vue.