Watch and watchEffect in Vue - Step-by-Step Execution

Concept Flow - Watch and watchEffect

Start Component Setup

↓

Define reactive state

↓

Set up watch/watchEffect

↓

Reactive state changes

↓

watch/watchEffect callback runs

↓

Update side effects or logs

↓

Component updates if needed

↓

End

This flow shows how Vue tracks reactive state changes and runs watch or watchEffect callbacks to react to those changes.

Execution Sample

Vue

import { ref, watch, watchEffect } from 'vue';
const count = ref(0);
watch(count, (newVal) => console.log('watch:', newVal));
watchEffect(() => console.log('watchEffect:', count.value));
count.value++;
count.value++;

This code sets up a reactive count and uses watch and watchEffect to log changes when count updates.

Execution Table

Step	Action	count.value	watch callback	watchEffect callback	Console Output
1	Initialize count	0	No	Runs immediately	watchEffect: 0
2	Increment count.value to 1	1	Runs with newVal=1	Runs	watch: 1 watchEffect: 1
3	Increment count.value to 2	2	Runs with newVal=2	Runs	watch: 2 watchEffect: 2
4	No further changes	2	No	No

💡 No more changes to count.value, so watch and watchEffect callbacks stop running.

Variable Tracker

Variable	Start	After 1	After 2	Final
count.value	0	1	2	2

Key Moments - 3 Insights

Why does watchEffect run immediately but watch does not?

watchEffect runs its callback right away to track dependencies, as shown in step 1 of execution_table, while watch waits for the watched value to change before running.

Does watchEffect run every time count.value changes?

Yes, watchEffect runs whenever any reactive dependency inside it changes, so it runs at steps 2 and 3 as count.value changes.

Why does watch callback receive newVal but watchEffect does not?

watch callback gets the new value as an argument because it watches a specific source, while watchEffect runs a function that accesses reactive values directly without arguments.

Visual Quiz - 3 Questions

Look at the execution_table, what is logged by watchEffect at step 1?

A watchEffect: 1

B watch: 0

C watchEffect: 0

D No output

💡 Hint

Check the Console Output column at step 1 in execution_table.

At which step does the watch callback first run?

A Step 2

B Step 1

C Step 3

D Never

💡 Hint

Look at the watch callback column and see when it first says 'Runs'.

If count.value was not incremented, how would the watch callback behave?

A It would run immediately once

B It would never run

C It would run twice

D It would run only on component mount

💡 Hint

Refer to the explanation that watch runs only when the watched value changes.

Concept Snapshot

Vue watch and watchEffect:
- watch tracks specific reactive sources and runs callback on change
- watchEffect runs immediately and whenever any reactive dependency changes
- watch callback receives new and old values
- watchEffect callback accesses reactive values directly
- Use watch for specific tracking, watchEffect for general reactive effects

Full Transcript

This visual execution shows how Vue's watch and watchEffect functions work. We start with a reactive count set to 0. watchEffect runs immediately and logs the current count. watch waits until count changes to run. When count increments to 1 and then 2, both watch and watchEffect run their callbacks and log the new values. watchEffect runs every time the reactive value changes, while watch runs only when the specific watched value changes. This helps understand when and how these two reactive watchers trigger in Vue.