perform side effects in reaction to state changes with Vue watchers.
What is a watcher in the Vue 3 Composition API?
Which of the following options correctly describes the syntax of a watcher in Vue 3 Composition API?
watch(x, (valueX, valueY) => {
console.log(`x is ${newX}`)
})Which of the following options is used to watch multiple reactive data properties in a single watcher?
watch only tracks the explicitly watched source. Callback from the second argument is only triggered when the source property has changed.
watchEffect combines dependency tracking and side effect into a single step. watchEffect() tracks the callback's reactive dependencies automatically. So, unlike watch(), no need to define explicit source property as the first argument.
watchEffect(async () => {
const response = await fetch(
`${BaseURL}/todos/${todoId.value}`
)
data.value = await response.json()
})Which of the followings are valid options for watch function?
What is the purpose of the immediate:true option in a watcher?
Which of the following option can be used to watch nested arrays or objects being watched?
Which of the following statements are true for the deep:true option of the watch function.
Which of the following option is applied in watch function to access the DOM inside a watcher callback?
Most watchers are created synchronously. These synchronous watch functions are stopped automatically when the component where they are declared is unmounted.
However, when the second argument is created with async callback, this watch function must be stopped manually to avoid memory leaks.`
Here’s how you can to stop the watcher manually.
const unwatch = watchEffect(() => {})
// ...later, when no longer needed
unwatch()How do you pass flush option in watchEffect function?