How Vue tracks dependencies automatically - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive reference in Vue.

Vue

const count = [1](0);

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

Awatch

Bref

Ccomputed

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for a single primitive value.

In Vue, ref is used to create a reactive reference to a value.

2fill in blank

medium

Complete the code to create a computed property that doubles the count.

Vue

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

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

Areactive

Bref

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref instead of computed for derived values.

computed creates a reactive value that updates automatically when its dependencies change.

3fill in blank

hard

Fix the error in the code to watch changes on count and log the new value.

Vue

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

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

A() => count.value

Bcount.value

Ccount

Dcomputed(() => count)

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the reactive reference directly instead of a getter function.

The watch function expects a getter function to track dependencies properly.

4fill in blank

hard

Fill both blanks to create a reactive object and access its property.

Vue

const state = [1]({ count: 0 });
console.log(state.[2]);

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

Areactive

Bcount

Cvalue

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref for objects or accessing properties with .value.

reactive creates a reactive object, and you access its properties directly.

5fill in blank

hard

Fill all three blanks to create a computed property that returns the uppercase name from a reactive object.

Vue

const state = reactive({ name: 'vue' });
const upperName = [1](() => state.[2].[3]());

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

Acomputed

Bname

CtoUpperCase

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref instead of computed or forgetting to call the method.

computed creates a reactive value, accessing the name property and calling toUpperCase() to transform it.