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.

Practice

1. What is the main difference between watch and watchEffect in Vue?

easy

A. watchEffect only runs once, watch runs continuously.

B. watch tracks specific reactive sources, watchEffect tracks all reactive dependencies automatically.

C. watch runs immediately on setup, watchEffect waits for changes.

D. watchEffect requires manual cleanup, watch does not.

Solution

1. Step 1: Understand watch behavior

   watch listens to specific reactive data sources you specify and runs a callback only when those change.

2. Step 2: Understand watchEffect behavior

   watchEffect runs immediately and tracks all reactive data accessed inside it, rerunning whenever any of those change.

3. Final Answer:

   watch tracks specific reactive sources, watchEffect tracks all reactive dependencies automatically. -> Option B

4. Quick Check:

   watch vs watchEffect difference = watch tracks specific reactive sources, watchEffect tracks all reactive dependencies automatically. [OK]

Hint: Remember: watch tracks specific data, watchEffect tracks all used data [OK]

Common Mistakes:

• Thinking watchEffect only runs once
• Assuming watch runs immediately on setup
• Confusing cleanup requirements

2. Which of the following is the correct syntax to watch a reactive variable count in Vue 3 Composition API?

easy

A. watch(count, (newVal, oldVal) => { console.log(newVal) })

B. watch(count, () => { console.log(count) })

C. watchEffect(() => { console.log(count) })

D. watch(() => count, (newVal, oldVal) => { console.log(newVal) })

Solution

1. Step 1: Identify correct watch syntax

   In Vue 3 Composition API, watch accepts a ref directly as the first argument, which automatically watches its .value.

2. Step 2: Check callback parameters

   The callback receives newVal and oldVal as parameters, correctly used in watch(count, (newVal, oldVal) => { console.log(newVal) }) to log the new value.

3. Final Answer:

   watch(count, (newVal, oldVal) => { console.log(newVal) }) -> Option A

4. Quick Check:

   Correct watch syntax uses ref directly = watch(count, (newVal, oldVal) => { console.log(newVal) }) [OK]

Hint: Pass ref directly to watch [OK]

Common Mistakes:

• Using getter returning ref object like () => count
• Confusing watch with watchEffect syntax
• Omitting callback parameters

3. Given the code below, what will be logged to the console after count.value = 2 is executed?

import { ref, watch } from 'vue'
const count = ref(1)
watch(() => count.value, (newVal, oldVal) => {
  console.log(`Changed from ${oldVal} to ${newVal}`)
})
count.value = 2

medium

A. SyntaxError

B. Changed from undefined to 2

C. No output

D. Changed from 1 to 2

Solution

1. Step 1: Understand watch callback parameters

   The watch callback receives old and new values of the watched reactive source.

2. Step 2: Trace the change

   Initially, count.value is 1. When changed to 2, the callback logs the change from 1 to 2.

3. Final Answer:

   Changed from 1 to 2 -> Option D

4. Quick Check:

   watch logs old and new values correctly = Changed from 1 to 2 [OK]

Hint: watch callback shows old and new values on change [OK]

Common Mistakes:

• Expecting no output on change
• Confusing initial value with undefined
• Misunderstanding callback parameters

4. What is wrong with this Vue 3 code using watch? How to fix it?

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

medium

A. No error; code works fine

B. Missing cleanup function; fix by adding cleanup inside callback

C. Callback missing oldVal parameter; fix by adding it

D. Passing reactive variable directly; fix by passing a getter function like () => count

Solution

1. Step 1: Identify watch argument type

   In Vue 3, watch(count, callback) is valid; it automatically tracks count.value changes.

2. Step 2: Callback parameters

   The callback receives newVal and optional oldVal; omitting oldVal is fine.

3. Final Answer:

   No error; code works fine -> Option A

4. Quick Check:

   watch accepts ref directly = No error; code works fine [OK]

Hint: watch accepts refs directly [OK]

Common Mistakes:

• Thinking ref must be wrapped in getter
• Assuming oldVal always required
• Believing code has error

5. You want to run a side effect immediately and re-run it whenever any reactive data inside changes, but also want to stop the effect manually later. Which Vue 3 API and pattern should you use?

hard

A. Use watch without immediate option and no cleanup

B. Use watch with immediate: true option and no stop function

C. Use watchEffect and store the returned stop function to call later

D. Use watchEffect but it cannot be stopped manually

Solution

1. Step 1: Identify immediate reactive effect

   watchEffect runs immediately and tracks all reactive dependencies automatically.

2. Step 2: Understand stopping effect

   watchEffect returns a stop function that can be called to stop the effect manually.

3. Final Answer:

   Use watchEffect and store the returned stop function to call later -> Option C

4. Quick Check:

   watchEffect runs immediately and can be stopped = Use watchEffect and store the returned stop function to call later [OK]

Hint: watchEffect returns stop function to control effect lifecycle [OK]

Common Mistakes:

• Thinking watchEffect cannot be stopped
• Using watch without immediate for immediate run
• Ignoring stop function usage