Watch vs computed decision in Vue - Visual Side-by-Side Comparison

Concept Flow - Watch vs computed decision

Start

↓

Define reactive data

↓

Computed property

↓

Auto recalculates

↓

Used in template

↓

Update UI

Shows how reactive data triggers either computed properties or watch effects, leading to UI updates.

Execution Sample

Vue

const count = ref(1)
const double = computed(() => count.value * 2)
watch(count, (newVal) => console.log('Count changed:', newVal))

count.value = 2

Reactive count changes, computed double updates automatically, watch logs change.

Execution Table

Step	Action	count.value	double.value	Watch Triggered	Output
1	Initialize count=1	1	2	No
2	Read double.value	1	2	No
3	Change count.value = 2	2	2	Yes	Count changed: 2
4	Read double.value after change	2	4	No

💡 No more changes; reactive system stabilizes.

Variable Tracker

Variable	Start	After Step 3	Final
count.value	1	2	2
double.value	2	2	4
Watch Triggered	No	Yes	No

Key Moments - 3 Insights

Why does the computed property update its value automatically when count changes?

Because computed properties track their reactive dependencies and recalculate when those change, as shown in execution_table step 4.

Why does the watch trigger only after count changes, not on initialization?

Watch runs its callback only when the watched reactive value changes after setup, as seen in execution_table step 3.

Can computed properties cause side effects like watch does?

No, computed properties are pure and only return values; side effects belong in watch callbacks, as shown by the console.log in step 3.

Visual Quiz - 3 Questions

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

A 4

B 2

C 1

D Undefined

💡 Hint

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

At which step does the watch callback run?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the Watch Triggered column in execution_table.

If count.value changed to 3 instead of 2, what would double.value be after the change?

A 6

B 3

C 2

D Undefined

💡 Hint

Recall computed property doubles count.value as shown in variable_tracker.

Concept Snapshot

Vue reactive data triggers updates.
Computed properties auto-recalculate when dependencies change.
Watch runs code on reactive data changes for side effects.
Use computed for derived data, watch for reacting to changes.
Computed is cached; watch runs every change.
Choose based on need: value or side effect.

Full Transcript

This visual execution shows how Vue's reactive data system works with computed properties and watch effects. We start with a reactive count set to 1. The computed property double calculates count times two and updates automatically when count changes. The watch listens to count changes and runs a callback logging the new value. When count changes to 2, the watch triggers and logs the change, while the computed property updates its value to 4 on next read. Computed properties are pure and cached, while watch is for side effects. This helps decide when to use each in Vue apps.