Debounced watchers pattern in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of a debounced watcher in Vue?

A debounced watcher delays the reaction to a data change until the user stops making changes for a short time. This helps avoid running expensive code too often, like API calls while typing.

intermediate

How do you create a debounced watcher using Vue's Composition API?

You use watch to observe a reactive value and wrap the callback with a debounce function (like from lodash or a custom one) so it only runs after a delay without new changes.

beginner

Why is debouncing useful in user input scenarios?

Debouncing waits until the user stops typing before running code. This reduces unnecessary work and improves performance, like avoiding many API requests while typing a search term.

beginner

What is a common library used to implement debounce in Vue watchers?

Lodash is a popular library that provides a debounce function, which you can use inside Vue watchers to delay execution.

intermediate

Show a simple example of a debounced watcher in Vue 3 Composition API.

import { ref, watch } from 'vue';
import { debounce } from 'lodash';

const searchTerm = ref('');

const debouncedSearch = debounce((newVal) => {
  console.log('Search for:', newVal);
}, 300);

watch(searchTerm, (newVal) => {
  debouncedSearch(newVal);
});

What does a debounced watcher do in Vue?

A Runs only once when the component mounts

B Delays reacting to changes until changes stop for a set time

C Prevents any reaction to changes

D Runs immediately on every change

A debounced watcher waits for changes to stop before running its callback.

Which Vue API is commonly used to create watchers?

A watch

B computed

C ref

D provide

The watch function observes reactive data changes.

Why use debounce in a watcher for a search input?

A To reduce API calls while typing

B To increase the number of API calls

C To disable the input field

D To clear the input automatically

Debounce helps avoid many API calls by waiting until typing stops.

Which library provides a popular debounce function?

A Moment.js

B Axios

C Vue Router

D Lodash

Lodash includes a handy debounce utility.

In Vue 3, what is the recommended way to debounce a watcher callback?

A Use <code>setTimeout</code> inside the watcher

B Use <code>computed</code> instead of <code>watch</code>

C Wrap the callback with a debounce function

D Use <code>nextTick</code> to delay execution

Wrapping the watcher callback with debounce is the cleanest approach.

Explain how to implement a debounced watcher in Vue 3 using the Composition API.

Think about delaying the watcher callback to avoid running it too often.

Why is debouncing important when watching user input in Vue applications?

Consider what happens if you react immediately to every keystroke.

Practice

1. What is the main purpose of using a debounced watcher in Vue?

easy

A. To watch multiple data sources at once without delay

B. To delay the reaction to a data change until the changes stop for a short time

C. To prevent any reaction to data changes

D. To immediately react to every single change without delay

Solution

1. Step 1: Understand what debounce means

   Debounce means waiting until changes stop before reacting, avoiding too many reactions.

2. Step 2: Apply debounce to Vue watchers

   Debounced watchers delay the reaction to data changes until the user stops changing the data for a set time.

3. Final Answer:

   To delay the reaction to a data change until the changes stop for a short time -> Option B

4. Quick Check:

   Debounced watcher delays reaction = D [OK]

Hint: Debounced watchers wait before reacting to changes [OK]

Common Mistakes:

• Thinking watchers react immediately without delay
• Confusing debounce with throttling
• Believing debounce stops all reactions

2. Which of the following is the correct way to import a debounce function for use in a Vue watcher?

easy

A. import { watchDebounce } from 'vue-router';

B. import debounce from 'vue';

C. import { debounce } from 'lodash-es';

D. import debounce from 'vue-debounce';

Solution

1. Step 1: Identify common debounce sources

   Lodash-es is a popular library providing debounce functions for JavaScript.

2. Step 2: Check Vue imports

   Vue itself does not export debounce; it must be imported from utility libraries like lodash-es.

3. Final Answer:

   import { debounce } from 'lodash-es'; -> Option C

4. Quick Check:

   Debounce from lodash-es = A [OK]

Hint: Debounce usually comes from lodash or similar libs, not Vue core [OK]

Common Mistakes:

• Trying to import debounce directly from Vue
• Confusing debounce with Vue Router features
• Using incorrect package names

3. Given this Vue 3 setup code, what will be logged when the user types quickly in the input?

import { ref, watch } from 'vue';
import { debounce } from 'lodash-es';

const search = ref('');

watch(search, debounce((newVal) => {
  console.log('Search:', newVal);
}, 300));

medium

A. Logs only once after the user stops typing for 300ms

B. Logs every keystroke immediately

C. Logs nothing because debounce is not working

D. Logs the initial empty string only

Solution

1. Step 1: Understand debounce effect on watcher

   The debounce delays the watcher callback until 300ms after the last change.

2. Step 2: Predict console output

   When typing quickly, the callback waits and logs only once after typing stops for 300ms.

3. Final Answer:

   Logs only once after the user stops typing for 300ms -> Option A

4. Quick Check:

   Debounced watcher logs once after delay = A [OK]

Hint: Debounce batches rapid changes into one delayed call [OK]

Common Mistakes:

• Expecting logs on every keystroke
• Thinking debounce disables logging
• Confusing debounce delay with immediate calls

4. What is wrong with this Vue 3 watcher code using debounce?

import { ref, watch } from 'vue';
import { debounce } from 'lodash-es';

const query = ref('');

watch(query, () => {
  debounce(() => {
    console.log('Query:', query.value);
  }, 500)();
});

medium

A. Debounce is not imported correctly

B. query should be a reactive object, not ref

C. Watcher is missing the immediate option

D. Debounce is called inside watcher callback, creating a new debounced function every time

Solution

1. Step 1: Analyze debounce usage inside watcher

   Debounce is created inside the watcher callback, so a new debounced function is made on every change.

2. Step 2: Understand debounce effect

   This prevents debounce from working properly because the delay resets each time, causing no real debounce.

3. Final Answer:

   Debounce is called inside watcher callback, creating a new debounced function every time -> Option D

4. Quick Check:

   Debounce recreated each call = B [OK]

Hint: Create debounce once outside watcher, not inside callback [OK]

Common Mistakes:

• Defining debounce inside watcher callback
• Forgetting to reuse the same debounced function
• Misunderstanding debounce lifecycle

5. You want to watch a search input and fetch results only after the user stops typing for 400ms. Which is the best way to implement this in Vue 3?

import { ref, watch } from 'vue';
import { debounce } from 'lodash-es';

const searchTerm = ref('');

// What is the correct watcher setup?

hard

A. const debouncedFetch = debounce((val) => fetchResults(val), 400);
watch(searchTerm, (val) => debouncedFetch(val));

B. watch(searchTerm, () => debounce((val) => fetchResults(val), 400));

C. watch(searchTerm, (val) => fetchResults(val)); // no debounce

D. const debouncedFetch = debounce(fetchResults, 400);
watch(searchTerm, debouncedFetch());

Solution

1. Step 1: Create debounce function once

   Define debouncedFetch outside watcher to keep the same debounced function.

2. Step 2: Use watcher to call debounced function

   Watcher calls debouncedFetch with new value, so fetchResults runs after 400ms of no changes.

3. Final Answer:

   const debouncedFetch = debounce((val) => fetchResults(val), 400); watch(searchTerm, (val) => debouncedFetch(val)); -> Option A

4. Quick Check:

   Debounce created once, watcher calls it = C [OK]

Hint: Define debounce once, call it inside watcher callback [OK]

Common Mistakes:

• Calling debounce inside watcher callback directly
• Not passing the value to debounced function
• Calling debounced function immediately instead of passing reference