Computed vs method performance in Vue - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

Difference in output when using computed vs method

Consider a Vue 3 component that displays a number doubled. Which option shows the correct output when using a computed property versus a method?

Vue

<script setup>
import { ref, computed } from 'vue'
const count = ref(2)
const doubleComputed = computed(() => count.value * 2)
function doubleMethod() {
  return count.value * 2
}
</script>
<template>
  <div>
    <p>Computed: {{ doubleComputed }}</p>
    <p>Method: {{ doubleMethod() }}</p>
  </div>
</template>

A Computed: 4, Method: 2

B Computed: 2, Method: 2

C Computed: 2, Method: 4

D Computed: 4, Method: 4

💡 Hint

Both computed properties and methods can return values, but computed caches results until dependencies change.

Both computed and method return the doubled value of count (2 * 2 = 4). The output shows 4 for both.

❓ state_output

intermediate

Performance difference when updating reactive state

In Vue 3, what happens to the output when count changes rapidly and you use a computed property versus a method to double it?

Vue

<script setup>
import { ref, computed } from 'vue'
const count = ref(1)
const doubleComputed = computed(() => count.value * 2)
function doubleMethod() {
  return count.value * 2
}
// Imagine count.value changes rapidly
</script>
<template>
  <div>
    <p>Computed: {{ doubleComputed }}</p>
    <p>Method: {{ doubleMethod() }}</p>
  </div>
</template>

A Computed updates only when count changes; method recalculates every render

B Computed recalculates every render; method caches result

C Both computed and method cache results until count changes

D Neither computed nor method update when count changes

💡 Hint

Think about caching behavior of computed properties versus methods.

Computed properties cache their result and only recalculate when dependencies change. Methods run every time the component renders.

📝 Syntax

advanced

Correct syntax for defining a computed property in Vue 3

Which option shows the correct way to define a computed property that returns the uppercase version of a reactive name?

Vue

import { ref, computed } from 'vue'
const name = ref('vue')
// Define computed property here

A const upperName = computed { return name.value.toUpperCase() }

B const upperName = computed(() => name.value.toUpperCase())

C const upperName = computed(() => { name.value.toUpperCase() })

D const upperName = computed(() => name.toUpperCase())

💡 Hint

Remember computed takes a function returning a value.

Option B correctly uses an arrow function returning the uppercase string. Option B is missing parentheses. Option B lacks a return statement. Option B accesses name directly instead of name.value.

🔧 Debug

advanced

Why does this method cause unnecessary recalculations?

Given this Vue 3 component snippet, why does the method cause performance issues compared to a computed property?

Vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
function double() {
  console.log('Calculating double')
  return count.value * 2
}
</script>
<template>
  <button @click="count++">Increment</button>
  <p>Double: {{ double() }}</p>
</template>

A The method runs on every render causing repeated calculations and console logs

B The method caches the result and never updates when count changes

C The method causes a syntax error because it lacks a return statement

D The method does not have access to count.value causing undefined errors

💡 Hint

Think about when methods run in Vue templates.

Methods run every time the component renders, so the console.log runs repeatedly, causing performance issues. Computed properties cache results and only recalculate when dependencies change.

🧠 Conceptual

expert

Choosing between computed and method for expensive calculations

You have a Vue 3 component that performs an expensive calculation based on reactive data. Which approach is best to optimize performance and why?

A Use a regular function outside the component to avoid reactivity overhead

B Use a method to recalculate the value every time the component renders for accuracy

C Use a computed property to cache the result and recalculate only when dependencies change

D Use a watcher to perform the calculation and store the result in a ref manually

💡 Hint

Consider caching and reactive updates.

Computed properties cache their results and only update when dependencies change, making them ideal for expensive calculations. Methods recalculate every render, which is inefficient. Watchers add complexity and regular functions outside reactivity won't update automatically.