Why advanced reactivity matters in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive variable using Vue's Composition API.

Vue

import { ref } from 'vue';
const count = [1](0);

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

Awatch

Bcomputed

Creactive

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for primitive values

Using computed or watch incorrectly here

Use ref to create a reactive primitive value like a number.

2fill in blank

medium

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

Vue

import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newVal) => {
  console.log([1]);
});

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

AoldVal

BnewVal

Ccount

Dcount.value

Attempts:

3 left

💡 Hint

Common Mistakes

Logging the reactive variable instead of the new value parameter

Using count.value inside the watcher callback

The watcher callback receives the new value as the first argument, here named newVal.

3fill in blank

hard

Fix the error in the code to correctly update a reactive object property.

Vue

import { reactive } from 'vue';
const state = reactive({ count: 0 });
function increment() {
  state.[1] += 1;
}

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

Acount

Bstate

Ccount.value

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using .value on reactive object properties

Trying to update the whole reactive object instead of a property

When using reactive, access properties directly without .value.

4fill in blank

hard

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

Vue

import { ref, computed } from 'vue';
const count = ref(5);
const double = computed(() => count[1][2]2);

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

A.value

B+

C*

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting .value to access the ref

Using addition or other wrong operators

Use .value to access the ref value and * to multiply by 2.

5fill in blank

hard

Fill all three blanks to create a reactive object with a nested property and update it.

Vue

import { reactive } from 'vue';
const state = reactive({ user: { name: [1] } });
function updateName(newName) {
  state.user.[2] = [3];
}

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

A'Alice'

Bname

CnewName

D'Bob'

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes incorrectly around property names

Confusing the property name and value

Initialize name with 'Alice', then update state.user.name to newName.