Computed vs method performance in Vue - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a computed property in Vue.

Vue

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

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

A/

B*

C-

D+

Attempts:

3 left

💡 Hint

Common Mistakes

Using + instead of * will add 2 instead of doubling.

Using / or - will not double the value.

The computed property doubles the count by multiplying it by 2 using the * operator.

2fill in blank

medium

Complete the method definition to return the doubled count.

Vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
function doubleCount() {
  return count.value [1] 2
}
</script>

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

A*

B+

C-

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using + will add 2 instead of doubling.

Using / or - will give incorrect results.

The method returns the count value multiplied by 2 using the * operator.

3fill in blank

hard

Fix the error in the computed property that should return count squared.

Vue

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

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

A**

B*

C+

D//

Attempts:

3 left

💡 Hint

Common Mistakes

Using * multiplies but does not square.

Using + or // causes syntax or logic errors.

The exponentiation operator ** raises count.value to the power of 2, correctly squaring it.

4fill in blank

hard

Fill both blanks to create a method that returns the count doubled and a computed property that returns count tripled.

Vue

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

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

A*

B+

C-

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using + will add instead of multiply.

Using - or / will give wrong results.

Both the method and computed property multiply count.value by a number using the * operator.

5fill in blank

hard

Fill all three blanks to create a computed property that filters even numbers and a method that sums an array.

Vue

<script setup>
import { ref, computed } from 'vue'
const numbers = ref([1, 2, 3, 4, 5])
const evens = computed(() => numbers.value.filter(n => n [1] 2 === 0))
function sum() {
  return numbers.value.reduce((acc, n) => acc [2] n, [3])
}
</script>

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

A%

B+

C0

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using / instead of % for remainder.

Starting reduce with 1 instead of 0.

Using - instead of + in reduce.

The computed property filters numbers where the remainder when divided by 2 is 0 (even numbers). The method sums all numbers starting from 0 using the + operator.