Why Vue performance matters - 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'

Awatch

Breactive

Cref

Dcomputed

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for a simple number.

Using computed when you want a reactive variable.

In Vue, ref creates a reactive variable that tracks changes.

2fill in blank

medium

Complete the code to watch changes on a reactive variable.

Vue

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

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

Acount

BcountReactive

CcountRef

Dcount.value

Attempts:

3 left

💡 Hint

Common Mistakes

Watching count.value instead of count.

Using a variable name that does not exist.

You watch the reactive variable itself, not its value property.

3fill in blank

hard

Fix the error in the Vue template binding.

Vue

<template>
  <div>{{ [1] }}</div>
</template>

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

AcountReactive

Bcount.value

CcountRef

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using count.value inside the template interpolation.

Using a variable name that is not defined.

In Vue templates, refs are unwrapped automatically, so use the variable name directly.

4fill in blank

hard

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

Vue

const doubleCount = computed(() => [1] * [2]);

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

Acount.value

Bcount

C2

DcountRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using count instead of count.value inside computed.

Using a variable name that is not reactive.

Computed properties use the inner value of refs, so use count.value multiplied by 2.

5fill in blank

hard

Fill all three blanks to create a reactive object and update its property.

Vue

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

function increment() {
  state.[2] += [3];
}

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

Areactive

Bcount

C1

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref instead of reactive for an object.

Trying to increment a property that does not exist.

Use reactive to create a reactive object, then update its count property by 1.