Ref and reactive in Composition API in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive reference for a count variable.

Vue

<script setup>
import { [1] } from 'vue'
const count = [1](0)
</script>

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

Areactive

Bref

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for primitive values.

Forgetting to import ref from 'vue'.

The ref function creates a reactive reference to a value, perfect for primitive types like numbers.

2fill in blank

medium

Complete the code to create a reactive object with a name property.

Vue

<script setup>
import { reactive } from 'vue'
const user = reactive({ [1]: 'Alice' })
</script>

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

Aage

Bvalue

Ccount

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using a property name unrelated to the user's name.

Trying to use ref instead of reactive for an object.

The reactive function wraps an object to make all its properties reactive. Here, name is the property we want.

3fill in blank

hard

Fix the error in accessing the value of a ref variable in the template.

Vue

<template>
  <p>Count is: {{ [1] }}</p>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(5)
</script>

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

Acount

Bcount.value

Ccount()

Dvalue.count

Attempts:

3 left

💡 Hint

Common Mistakes

Using .value inside the template, which is unnecessary.

Trying to call the ref as a function.

In Vue templates, you can use a ref variable directly without .value. Vue unwraps it automatically.

4fill in blank

hard

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

Vue

<script setup>
import { [1] } from 'vue'
const state = [2]({ count: 0 })
state.count++
</script>

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

Areactive

Bref

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing ref and reactive incorrectly.

Forgetting to import reactive.

reactive is used to create a reactive object. We import and call reactive to wrap the object.

5fill in blank

hard

Fill all three blanks to create a ref, update its value, and display it in the template.

Vue

<template>
  <p>Message: {{ [1] }}</p>
</template>

<script setup>
import { [2] } from 'vue'
const message = [3]('Hello')
message.value = 'Hi there!'
</script>

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

Amessage

Bref

Cmessage.value

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using message.value in the template.

Importing reactive instead of ref.

Using reactive to create a primitive ref.

We import ref to create a reactive reference. The variable message holds the ref. In the template, we use message directly because Vue unwraps refs automatically.