Computed properties for derived state in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Vue computed property?

Consider this Vue component using the Composition API. What will be displayed inside the paragraph when the component renders?

Vue

<script setup>
import { ref, computed } from 'vue'
const count = ref(3)
const doubleCount = computed(() => count.value * 2)
</script>
<template>
  <p>{{ doubleCount }}</p>
</template>

A undefined

B 3

C 6

D NaN

💡 Hint

Remember that computed properties return a reactive value based on other reactive sources.

The computed property doubleCount multiplies count.value (3) by 2, resulting in 6. This value is displayed in the paragraph.

❓ state_output

intermediate

What is the value of fullName computed property?

Given this Vue component, what is the value of the computed property fullName?

Vue

<script setup>
import { reactive, computed } from 'vue'
const user = reactive({ firstName: 'Jane', lastName: 'Doe' })
const fullName = computed(() => `${user.firstName} ${user.lastName}`)
</script>

A undefined

B "Jane Doe"

C "Doe Jane"

D "JaneDoe"

💡 Hint

Look at the template literal combining firstName and lastName with a space.

The computed property fullName concatenates user.firstName and user.lastName with a space, resulting in "Jane Doe".

📝 Syntax

advanced

Which option correctly defines a computed property that returns the square of a number?

Select the option that correctly defines a computed property named squared that returns the square of a reactive number value.

A const squared = computed(() => number.value ^ 2)

B const squared = computed(() => number * 2)

C const squared = computed(() => number.value * 2)

D const squared = computed(() => number.value ** 2)

💡 Hint

Remember to access the reactive value with .value and use the exponentiation operator.

Option D correctly accesses number.value and uses the exponentiation operator ** to square it. Option D and C multiply by 2 instead of squaring. Option D uses ^ which is a bitwise XOR, not exponentiation.

🔧 Debug

advanced

Why does this computed property not update when the reactive source changes?

Given this Vue component, why does the computed property fullName not update when user.firstName changes?

Vue

<script setup>
import { reactive, computed } from 'vue'
const user = { firstName: 'John', lastName: 'Smith' }
const fullName = computed(() => `${user.firstName} ${user.lastName}`)
user.firstName = 'Mike'
</script>

A Because user is not reactive, so changes to firstName are not tracked.

B Because computed properties cannot depend on objects.

C Because fullName needs to be a ref, not computed.

D Because user.firstName is a constant and cannot be changed.

💡 Hint

Check how user is declared and whether Vue can track its changes.

The user object is a plain object, not reactive. Vue cannot track changes to its properties, so fullName does not update when firstName changes.

🧠 Conceptual

expert

How does Vue's computed property caching work?

Which statement best describes how Vue caches computed properties?

A Vue caches computed properties and only recalculates them when their reactive dependencies change.

B Vue recalculates computed properties on every component render regardless of dependencies.

C Vue caches computed properties permanently after the first calculation and never updates them.

D Vue does not cache computed properties; they behave like methods.

💡 Hint

Think about efficiency and when Vue should update computed values.

Vue tracks reactive dependencies of computed properties and only recalculates them when those dependencies change, improving performance.