How Vue differs from React and Angular - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Vue 3 component using the Composition API.

Vue

<script setup>
import { ref } from 'vue'
const count = [1](0)
</script>
<template>
  <button @click="count.value++">Count: {{ count }}</button>
</template>

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

Areactive

Bwatch

Ccomputed

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for primitive values.

Vue 3 uses ref to create reactive primitive values like numbers.

2fill in blank

medium

Complete the code to conditionally render a message in Vue using the new control flow directive.

Vue

<template>
  <p @if="(isLoggedIn)">Welcome back!</p>
  <p @[1]>Please log in.</p>
</template>

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

Aelse-if

Bshow

Celse

Dfor

Attempts:

3 left

💡 Hint

Common Mistakes

Using @else-if instead of @else here.

Vue 3.4+ uses @if and @else directives for control flow.

3fill in blank

hard

Fix the error in this Vue 3 component by completing the import statement correctly.

Vue

<script setup>
import { [1] } from 'vue'
const message = ref('Hello!')
</script>

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

Aref

Breactive

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Importing reactive instead of ref for primitive values.

The ref function must be imported from 'vue' to create reactive references.

4fill in blank

hard

Fill both blanks to create a reactive object and watch its changes in Vue 3.

Vue

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

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

Areactive

Bref

Cwatch

Dcomputed

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref instead of reactive for objects.

Not importing watch.

reactive creates a reactive object, and watch observes changes.

5fill in blank

hard

Fill the blank to create a reactive counter with a method to increment it in Vue 3 Composition API.

Vue

<script setup>
import { [1] } from 'vue'
const count = [1](0)
function increment() {
  count.value++
}
</script>
<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

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

Awatch

Bref

Ccomputed

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Importing reactive instead of ref.

Importing unused functions.

ref creates reactive primitives. watch and computed are common imports but not used here.