Debounced watchers pattern in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the watched value changes rapidly in this debounced watcher?

Consider a Vue 3 component using a debounced watcher on a reactive property. If the property changes multiple times quickly, what will the watcher callback do?

Vue

<script setup>
import { ref, watch } from 'vue'
import { debounce } from 'lodash-es'

const searchTerm = ref('')

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

watch(searchTerm, (newVal) => {
  debouncedSearch(newVal)
})
</script>

A The watcher callback runs only once, 300ms after the last change stops.

B The watcher callback runs immediately on every change without delay.

C The watcher callback runs multiple times, each delayed by 300ms from the previous.

D The watcher callback never runs because debounce blocks it.

💡 Hint

Think about how debounce delays function calls until changes stop.

Debounce delays the execution of the callback until 300ms have passed without new calls. Rapid changes reset the timer, so only the last change triggers the callback after the delay.

📝 Syntax

intermediate

Which option correctly implements a debounced watcher in Vue 3 Composition API?

Select the code snippet that correctly sets up a debounced watcher on a reactive property named 'query' using lodash debounce.

A const debounced = debounce((val) => console.log(val), 200); watch(query, debounced)

B watch(query, (val) => { debounce(() => console.log(val), 200)() })

C watch(query, debounce((val) => { console.log(val) }, 200))

D watch(debounce(query, 200), (val) => console.log(val))

💡 Hint

Debounce wraps the callback, not the reactive source.

You create a debounced function first, then pass it as the watcher callback. Wrapping the source or calling debounce inside the watcher callback is incorrect.

🔧 Debug

advanced

Why does this debounced watcher log stale values?

This Vue 3 component uses a debounced watcher but logs old values instead of the latest. What causes this behavior?

Vue

<script setup>
import { ref, watch } from 'vue'
import { debounce } from 'lodash-es'

const input = ref('')

watch(input, (newVal) => {
  debounce(() => {
    console.log(newVal)
  }, 300)()
})
</script>

A Debounce delays the watcher callback, so it logs the value before changes.

B The debounced function captures the input value only once when created, not on each call.

C The watcher is not triggered because input is not reactive.

D The debounce delay is too short to capture the latest value.

💡 Hint

Check when the debounced function reads the reactive value.

The debounced function closes over newVal at creation time, so it logs the value from when it was created. To fix, pass the value as an argument to the debounced function.

❓ state_output

advanced

What is the console output sequence when rapidly updating a debounced watcher?

Given this Vue 3 code, what will be printed to the console if 'text' changes from '' to 'a', then 'ab', then 'abc' within 100ms intervals?

Vue

<script setup>
import { ref, watch } from 'vue'
import { debounce } from 'lodash-es'

const text = ref('')

const debouncedPrint = debounce((val) => {
  console.log('Value:', val)
}, 200)

watch(text, (val) => {
  debouncedPrint(val)
})

// Simulate rapid changes:
text.value = 'a'
setTimeout(() => { text.value = 'ab' }, 100)
setTimeout(() => { text.value = 'abc' }, 200)
</script>

A No output because debounce blocks all calls

B

Value: a
Value: ab
Value: abc

C Value: a

D Value: abc

💡 Hint

Debounce resets the timer on each call within the delay.

Each change resets the debounce timer. Only the last value 'abc' is logged after 200ms from the last change.

🧠 Conceptual

expert

Why prefer debounced watchers over immediate watchers for expensive operations?

In Vue 3, why is using a debounced watcher better than an immediate watcher for operations like API calls triggered by user input?

A Immediate watchers delay the operation, causing slower UI updates.

B Debounced watchers run the operation immediately on every change, improving responsiveness.

C Debounced watchers reduce the number of times the expensive operation runs by waiting for input to settle.

D Immediate watchers always run only once, so they are less efficient.

💡 Hint

Think about how debounce groups rapid changes into one action.

Debounced watchers wait for a pause in changes before running the operation, preventing excessive calls and improving performance.