Watchers for side effects in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a watcher in Vue?

A watcher in Vue is a special function that 'watches' a reactive value or expression and runs code when that value changes. It's used to perform side effects like fetching data or updating something outside the component.

beginner

How do you define a watcher using the Composition API in Vue 3?

You use the watch function by passing the reactive source and a callback function that runs when the source changes. For example:

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

intermediate

Why use watchers for side effects instead of computed properties?

Computed properties are for deriving values based on reactive data and are cached. Watchers are for running code that causes side effects, like API calls or manual DOM updates, which should not be done inside computed properties.

intermediate

What does the immediate option do in a Vue watcher?

The immediate option makes the watcher callback run right away when the watcher is created, not just when the watched value changes later. This is useful to run side effects on initial setup.

intermediate

How can you stop a watcher in Vue?

When you call watch, it returns a stop function. Calling this function stops the watcher from running in the future, which helps avoid memory leaks or unwanted side effects.

What is the main purpose of a watcher in Vue?

A To run code when reactive data changes

B To create new components

C To style elements

D To define routes

Watchers run code when reactive data changes, often for side effects.

Which Vue API function is used to create a watcher in the Composition API?

A watchEffect

B watch

C computed

D ref

watch is used to watch reactive sources and run side effect code.

What does setting immediate: true do in a watcher?

A Prevents the watcher from running

B Runs the watcher only once

C Runs the watcher callback immediately on setup

D Delays the watcher callback

The immediate option runs the watcher callback right away when created.

Which of these is NOT a good use case for watchers?

A Calculating a value based on other data

B Updating the page title

C Fetching data when a value changes

D Logging changes to the console

Calculations should be done with computed properties, not watchers.

How do you stop a watcher from running in Vue?

A Remove the component

B Set the watcher to null

C Use <code>unwatch()</code> function

D Call the stop function returned by watch

The watch function returns a stop function to stop the watcher.

Explain how watchers help manage side effects in Vue applications.

Think about when and why you want to run extra code after data changes.

Describe how to create a watcher using Vue 3 Composition API and how to stop it.

Focus on the syntax and lifecycle of a watcher.

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