Watch and watchEffect in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the correct function for watching reactive data.

Vue

import { [1] } from 'vue';

Drag options to blanks, or click blank then click option'

Aref

Breactive

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'ref' instead of 'watch'.

Using 'reactive' which creates reactive objects but does not watch.

The watch function is used to watch reactive data changes in Vue.

2fill in blank

medium

Complete the code to watch the reactive variable 'count' and log its new value.

Vue

watch(count, (newVal, oldVal) => { console.log([1]); });

Drag options to blanks, or click blank then click option'

AnewVal

BoldVal

Ccount

Dthis.count

Attempts:

3 left

💡 Hint

Common Mistakes

Logging the old value instead of the new value.

Trying to access 'this.count' inside the callback.

The callback receives the new value as the first argument, which we log.

3fill in blank

hard

Fix the error in the watchEffect usage to correctly log the reactive 'message'.

Vue

watchEffect(() => { console.log([1]); });

Drag options to blanks, or click blank then click option'

Amessage.value

Bmessage

Cthis.message

Dmessage()

Attempts:

3 left

💡 Hint

Common Mistakes

Logging the ref object instead of its value.

Trying to call the ref as a function.

When watching a ref inside watchEffect, you must access its value with .value.

4fill in blank

hard

Fill both blanks to create a watch that triggers only when 'user.name' changes and logs the new name.

Vue

watch(() => user[1]name, (newName) => { console.log(newName[2]); });

Drag options to blanks, or click blank then click option'

A.

B[

C]

D()

Attempts:

3 left

💡 Hint

Common Mistakes

Using brackets instead of dot for property access.

Forgetting parentheses when calling console.log.

The first blank needs a dot to access the property. The second blank uses parentheses to call the function console.log.

5fill in blank

hard

Fill all three blanks to create a watchEffect that updates 'fullName' by combining 'firstName' and 'lastName'.

Vue

watchEffect(() => { fullName.value = [1] + ' ' + [2]; [3] });

Drag options to blanks, or click blank then click option'

AfirstName.value

BlastName.value

Cconsole.log(fullName.value)

DfullName

Attempts:

3 left

💡 Hint

Common Mistakes

Using the ref names without .value.

Forgetting to log the updated fullName.

Access the values of firstName and lastName refs with .value. Then log the updated fullName.