Why Vue for progressive web development - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive variable in Vue.

Vue

const count = [1](0);

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

Acomputed

Breactive

Cref

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for simple values.

In Vue 3, ref is used to create a reactive variable that holds a simple value like a number.

2fill in blank

medium

Complete the code to import the ref function from Vue.

Vue

import { [1] } from 'vue';

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

Areactive

Bref

Cwatch

Dcomputed

Attempts:

3 left

💡 Hint

Common Mistakes

Importing reactive instead of ref.

You import ref from Vue to create reactive variables in the Composition API.

3fill in blank

hard

Fix the error in the code to correctly define a reactive object.

Vue

const state = [1]({ count: 0 });

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

Aref

Bwatch

Ccomputed

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref for objects causes unexpected behavior.

Use reactive to create a reactive object with multiple properties.

4fill in blank

hard

Fill both blanks to create a computed property that doubles a count.

Vue

const doubleCount = [1](() => state.count [2] 2);

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

Acomputed

B*

C+

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref instead of computed.

Using addition instead of multiplication.

computed creates a reactive value based on other reactive data. Multiplying by 2 doubles the count.

5fill in blank

hard

Fill all three blanks to watch the count and log changes.

Vue

watch([1], (newVal, oldVal) => { console.log('Count changed from', [2], 'to', [3]); });

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

Astate.count

BoldVal

CnewVal

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-reactive variables in watch.

Mixing up newVal and oldVal in the log.

watch observes changes to reactive data. The callback receives new and old values to compare.