Reactivity transform and limitations in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a reactive variable using reactivity transform.

Vue

let count = [1](0)

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

Acomputed

Bref

Creactive

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for primitive values

Using computed when just declaring a reactive variable

Use ref to declare a reactive primitive variable with reactivity transform.

2fill in blank

medium

Complete the code to use reactivity transform to automatically unwrap refs in the template.

Vue

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

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

Acount

Bcount.value

Ccount()

DcountRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using count.value inside template which is unnecessary

Trying to call count() as a function

With reactivity transform, refs are automatically unwrapped in templates, so just use count.

3fill in blank

hard

Fix the error in the script setup by correctly importing the reactivity transform helper.

Vue

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

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

Acomputed

Breactive

Cref

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Importing reactive instead of ref

Forgetting to import ref at all

You must import ref to use it for reactive variables.

4fill in blank

hard

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

Vue

<script setup>
let state = [1]({ count: 0 })
console.log(state.[2])
</script>

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

Areactive

Bref

Ccount

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref for objects

Trying to access property with .value

Use reactive for objects and access properties directly without .value.

5fill in blank

hard

Fill all three blanks to correctly use reactivity transform with a computed property and watch effect.

Vue

<script setup>
let count = ref(0)
let double = [1](() => count.value [2] 2)
watch(() => count, (newVal) => {
  console.log('Count changed to', [3])
})
</script>

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

Acomputed

B*

CnewVal

Dcount.value

Attempts:

3 left

💡 Hint

Common Mistakes

Using count.value inside watch callback instead of newVal

Using + instead of * for doubling

Using ref instead of computed

Use computed for derived values, * for multiplication, and newVal from watch callback.