Watchers for side effects in Vue - Step-by-Step Execution

Concept Flow - Watchers for side effects

Start Component

↓

Declare reactive state

↓

Set up watcher on state

↓

State changes?

No→Wait

Yes↓

Watcher runs side effect

↓

Side effect updates DOM or logs

↓

Wait for next change

The watcher observes a reactive state. When the state changes, it runs a side effect like updating the DOM or logging.

Execution Sample

Vue

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

This code watches the reactive variable 'count' and logs a message whenever 'count' changes.

Execution Table

Step	Action	State Before	State After	Watcher Triggered?	Side Effect Output
1	Initialize count	count=undefined	count=0	No	None
2	Set up watcher on count	count=0	count=0	No	None
3	Change count.value to 1	count=0	count=1	Yes	Console logs: 'Count changed to 1'
4	No further changes	count=1	count=1	No	None

💡 No more changes to reactive state, watcher does not trigger.

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
count.value	undefined	0	1	1

Key Moments - 2 Insights

Why does the watcher run only after the state changes?

The watcher triggers only when the reactive variable changes value, as shown in step 3 of the execution_table where count changes from 0 to 1.

Does the watcher run when it is first set up?

No, the watcher does not run immediately on setup unless configured with immediate: true. Step 2 shows no watcher trigger.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of count after step 3?

A 1

B undefined

C 0

D null

💡 Hint

Check the 'State After' column for step 3 in the execution_table.

At which step does the watcher trigger a side effect?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Watcher Triggered?' column in the execution_table.

If count.value changed to 2 after step 4, what would happen?

A Watcher does not trigger

B Watcher triggers and logs 'Count changed to 2'

C Component re-renders but no log

D Error occurs

💡 Hint

Watchers run side effects on reactive state changes as shown in step 3.

Concept Snapshot

Vue watchers observe reactive state changes.
When the watched value changes, the watcher runs a side effect function.
Side effects can update UI, log info, or trigger other actions.
Watchers do not run on setup unless immediate: true is set.
Use watchers to react to changes outside template rendering.

Full Transcript

This visual trace shows how Vue watchers work for side effects. First, a reactive variable 'count' is created with initial value 0. Then a watcher is set up to observe 'count'. When 'count.value' changes to 1, the watcher triggers and runs its side effect, logging the new value. The watcher does not run on setup or when there are no changes. This helps run code in response to state changes, like logging or updating external systems.

Practice

1. What is the main purpose of a watch in Vue?

easy

A. To run code when reactive data changes

B. To define a new component

C. To style elements dynamically

D. To create a template for HTML

Solution

1. Step 1: Understand what watch does

   A watcher observes reactive data and triggers code when that data changes.

2. Step 2: Compare options to watcher purpose

   Only To run code when reactive data changes describes running code on reactive data change, which matches watcher behavior.

3. Final Answer:

   To run code when reactive data changes -> Option A

4. Quick Check:

   Watcher = run code on data change [OK]

Hint: Watchers react to data changes by running code [OK]

Common Mistakes:

• Confusing watchers with components
• Thinking watchers style elements
• Assuming watchers create templates

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 }, (newVal, oldVal) => { console.log(newVal) })

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

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

Solution

1. Step 1: Recall Vue 3 watch syntax for reactive refs

   In Vue 3 Composition API, to watch a ref's value, you typically pass a getter function like watch(() => count, callback) or watch(() => count.value, callback). Passing the ref directly watches the ref object, not its value.

2. Step 2: Check each option

   watch(count, ...) watches the ref object, not its value. watch({ count }, ...) passes an object, invalid. watch('count', ...) uses invalid string. watch(() => count, ...) watches the value returned by the function, which is the ref's value.

3. Final Answer:

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

4. Quick Check:

   Watch ref value with function source = watch(() => count, callback) [OK]

Hint: Pass a function returning the reactive value to watch [OK]

Common Mistakes:

• Passing { count } object instead of ref
• Using string 'count'
• Passing ref object directly instead of function

3. Given the code below, what will be logged when count.value changes from 1 to 2?

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. Changed from 1 to 2

B. Changed from 2 to 1

C. Changed from undefined to 2

D. No output

Solution

1. Step 1: Understand watcher callback parameters

   The watcher callback receives newVal and oldVal representing the new and previous values of the watched source.

2. Step 2: Trace the value change

   Initially, count.value is 1. When changed to 2, the watcher logs "Changed from 1 to 2".

3. Final Answer:

   Changed from 1 to 2 -> Option A

4. Quick Check:

   Old to new value logged = Changed from 1 to 2 [OK]

Hint: Watcher logs old and new values on change [OK]

Common Mistakes:

• Mixing old and new values order
• Expecting no output on value change
• Confusing initial value as undefined

4. Identify the error in this watcher code snippet:

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

medium

A. Callback function must have two parameters

B. Missing function to return count in watch source

C. Ref must be declared with reactive() instead of ref()

D. watch must be imported from 'vue-router'

Solution

1. Step 1: Check watch source argument

   In Vue 3 Composition API, to watch a ref, you must pass a function returning the ref's value, like watch(() => count.value, callback).

2. Step 2: Identify the error

   The code passes count.value directly, which is incorrect. It should be watch(() => count.value, ...).

3. Final Answer:

   Missing function to return count in watch source -> Option B

4. Quick Check:

   Watch source must be a function returning value [OK]

Hint: Watch source must be a function returning reactive value [OK]

Common Mistakes:

• Passing count.value (primitive) directly instead of ref or getter
• Thinking callback needs two parameters always
• Importing watch from wrong package

5. You want to watch a reactive object user and run a side effect only when the user.name changes, ignoring other properties. Which watcher setup is correct?

hard

A. watch(() => user, (newUser) => { console.log('User changed:', newUser) }, { deep: true })

B. watch(user, (newUser) => { console.log('User changed:', newUser) })

C. watch(() => user.name, (newName) => { console.log('Name changed:', newName) })

D. watch('user.name', (newName) => { console.log('Name changed:', newName) })

Solution

1. Step 1: Understand watching nested properties

   To watch a specific property like user.name, watch a function returning that property.

2. Step 2: Evaluate options

   watch(() => user.name, (newName) => { console.log('Name changed:', newName) }) watches user.name directly, triggering only on name changes. watch(user, (newUser) => { console.log('User changed:', newUser) }) watches whole object, triggering on any change. watch(() => user, (newUser) => { console.log('User changed:', newUser) }, { deep: true }) watches whole object deeply, also triggers on any change. watch('user.name', (newName) => { console.log('Name changed:', newName) }) uses a string, which is invalid in Vue 3 Composition API.

3. Final Answer:

   watch(() => user.name, (newName) => { console.log('Name changed:', newName) }) -> Option C

4. Quick Check:

   Watch specific property with function source = watch(() => user.name, (newName) => { console.log('Name changed:', newName) }) [OK]

Hint: Watch specific property with a function returning it [OK]

Common Mistakes:

• Watching whole object instead of property
• Using string source instead of function
• Using deep option unnecessarily