Computed properties are reactive, performant and tracks dependencies while performing complex logical calculations in your Vue applications.
Test your knowledge on Computed property feature of Vue 3.
Computed property helps you extract complex logic away from the component template while still maintaining reactivity.
Computed properties are only run when its reactive dependencies have changed.
Syntax:
<script setup>
const completedList = computed(() =>
{
return items.value.filter(
item => item.completed
)
})
</script>Which of the following options describes the correct syntax for defining a computed property in Vue 3?
How can you unwrap and access a computed property named completedList in script section of a Vue 3 component?
How can you access the computed property named completedList in the template area of a Vue 3 component?
A computed property will only re-run when reactive variables used inside have changed.
This means, in our earlier example, as long as an individual item status in items array has not changed, multiple access to completedList will immediately return the previously computed result without having to run the getter function again, unlike method invocation which will always run the function whenever a re-render happens.
Which one of the following statements is true for computed properties?
Computed properties in Vue.js 3 are best suited for:
Which of the following scenarios are an appropriate use-cases for a computed property?
Which of the following statements accurately describes the behaviour of a computed property?
What is the main advantage of using a computed property with the Composition API in Vue.js 3?