Why advanced patterns matter 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

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

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

Aref

Breactive

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for simple values

Trying to use computed without a getter function

In Vue's Composition API, ref creates a reactive variable that holds a simple value like a number.

2fill in blank

medium

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

Vue

<script setup>
import { ref, [1] } from 'vue'
const count = ref(0)
[1](count, (newVal) => {
  console.log(newVal)
})
</script>

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

Awatch

Breactive

Ccomputed

DonMounted

Attempts:

3 left

💡 Hint

Common Mistakes

Using computed instead of watch for side effects

Trying to watch without importing watch

The watch function lets you react to changes in reactive variables.

3fill in blank

hard

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

Vue

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

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

Acounter

Bnumber

Cvalue

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong property name like 'counter' or 'value'

Trying to increment the reactive object itself

The reactive object has a property named count, so you must update state.count.

4fill in blank

hard

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

Vue

<script setup>
import { ref, [1] } from 'vue'
const count = ref(5)
const double = [1](() => count.value [2] 2)
</script>

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

Acomputed

B*

C+

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of computed

Using addition instead of multiplication

computed creates a reactive value based on others. Multiplying by * 2 doubles the count.

5fill in blank

hard

Fill all three blanks to create a reactive object, update a property, and watch the change.

Vue

<script setup>
import { [1], watch } from 'vue'
const state = [2]({ count: 0 })
watch(() => state.count, (newVal) => {
  console.log('Count changed to', newVal)
})
state.[3] = 10
</script>

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

Areactive

Ccount

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref instead of reactive for objects

Updating a wrong property name

Use reactive to create the object, then update the count property to trigger the watcher.