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.

Practice

1. Which statement best explains why computed properties are generally faster than methods in Vue?

easy

A. Computed properties cache their results and only recalculate when dependencies change.

B. Methods run only once and then cache their results automatically.

C. Computed properties run every time the component renders without caching.

D. Methods cache results and update only when data changes.

Solution

1. Step 1: Understand computed property behavior

   Computed properties remember their last result and only recalculate if their dependent data changes.

2. Step 2: Contrast with methods

   Methods run fresh every time they are called, without caching results.

3. Final Answer:

   Computed properties cache their results and only recalculate when dependencies change. -> Option A

4. Quick Check:

   Computed cache = B [OK]

Hint: Remember: computed caches, methods do not [OK]

Common Mistakes:

• Thinking methods cache results automatically
• Believing computed properties run every render
• Confusing when caching happens

2. Which of the following is the correct syntax to define a computed property named fullName in a Vue 3 component using the Composition API?

easy

A. const fullName = () => firstName + ' ' + lastName;

B. methods: { fullName() { return firstName + ' ' + lastName } }

C. computed: { fullName() { return firstName + ' ' + lastName } }

D. const fullName = computed(() => firstName + ' ' + lastName);

Solution

1. Step 1: Identify Composition API syntax

   In Vue 3 Composition API, computed properties are created by calling the computed function with a getter function.

2. Step 2: Check each option

   const fullName = computed(() => firstName + ' ' + lastName); correctly uses computed(() => ...). Options B and C use Options API syntax, and D is just a plain function without caching.

3. Final Answer:

   const fullName = computed(() => firstName + ' ' + lastName); -> Option D

4. Quick Check:

   Composition API computed = A [OK]

Hint: Composition API computed uses computed(() => ...) [OK]

Common Mistakes:

• Mixing Options API and Composition API syntax
• Using methods syntax for computed
• Not wrapping in computed() function

3. Given the Vue component below, what will be logged to the console when the button is clicked twice?

setup() {
  const count = ref(0);
  const doubleCount = computed(() => {
    console.log('Computed called');
    return count.value * 2;
  });
  function increment() {
    count.value++;
    console.log('Method called:', doubleCount.value);
  }
  return { count, doubleCount, increment };
}

medium

A. Method called: 0\nMethod called: 0

B. Computed called\nMethod called: 2\nMethod called: 4

C. Computed called\nMethod called: 2\nComputed called\nMethod called: 4

D. Computed called\nComputed called\nMethod called: 2\nMethod called: 4

Solution

1. Step 1: Understand computed caching and logging

   The computed property logs 'Computed called' only when recalculated. It recalculates when count.value changes.

2. Step 2: Trace the two button clicks

   First click: count=1 triggers computed recalculation (logs 'Computed called'), then method logs 'Method called: 2'. Second click: count=2 triggers computed recalculation again (logs 'Computed called'), then method logs 'Method called: 4'.

3. Final Answer:

   Computed called Method called: 2 Computed called Method called: 4 -> Option C

4. Quick Check:

   Computed logs twice, method logs twice = A [OK]

Hint: Computed logs only on dependency change, methods run every call [OK]

Common Mistakes:

• Assuming computed logs every method call
• Ignoring reactive dependency triggers
• Confusing method and computed logs

4. You have a Vue component where a method is used to calculate a value that depends on reactive data. The UI is slow because the method runs on every render. How can you fix this performance issue?

medium

A. Convert the method to a computed property so it caches results until dependencies change.

B. Wrap the method call inside a watch to run less often.

C. Use a lifecycle hook to call the method only once.

D. Move the method logic to a separate utility file.

Solution

1. Step 1: Identify the cause of slowness

   Methods run fresh every render, causing repeated calculations and slowing UI.

2. Step 2: Apply computed property for caching

   Computed properties cache results and only recalculate when reactive dependencies change, improving performance.

3. Final Answer:

   Convert the method to a computed property so it caches results until dependencies change. -> Option A

4. Quick Check:

   Use computed for caching = C [OK]

Hint: Switch slow methods to computed for caching [OK]

Common Mistakes:

• Using watch incorrectly to reduce method calls
• Thinking lifecycle hooks solve reactive recalculations
• Moving logic without caching benefits

5. You have a Vue 3 component that displays a filtered list based on a search term. The filtering is done inside a method called filteredList() which runs on every render, causing lag with large data. How can you optimize this using computed properties? Consider that the list and search term are reactive refs.

hard

A. Use a method but memoize results manually with a cache object.

B. Replace the method with a computed property that returns the filtered list, so filtering runs only when list or search term changes.

C. Move filtering logic to a watcher that updates a reactive variable with filtered results.

D. Keep the method but debounce the search input to reduce calls.

Solution

1. Step 1: Identify reactive dependencies

   The filtered list depends on the reactive list and search term, so it should update only when these change.

2. Step 2: Use computed property for caching

   Computed properties cache results and recalculate only when dependencies change, making filtering efficient.

3. Step 3: Compare other options

   Debouncing reduces calls but does not cache results. Watchers add complexity. Manual memoization is error-prone.

4. Final Answer:

   Replace the method with a computed property that returns the filtered list, so filtering runs only when list or search term changes. -> Option B

5. Quick Check:

   Use computed for reactive filtering = D [OK]

Hint: Use computed to cache filtered results by dependencies [OK]

Common Mistakes:

• Relying on debouncing without caching
• Using watchers unnecessarily
• Trying manual memoization instead of computed