Computed in Composition API in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a computed property in Vue's Composition API?

A computed property is a special reactive value that automatically updates when its dependencies change. It caches its result until those dependencies change again.

beginner

How do you create a computed property in Vue's Composition API?

You import <code>computed</code> from 'vue' and call it with a function that returns the value you want to compute. Example: <code>const double = computed(() =&gt; count.value * 2)</code>.

intermediate

Why use computed instead of a regular function in Vue's Composition API?

Because computed caches its result and only recalculates when dependencies change, making your app more efficient and reactive.

intermediate

What happens if you try to assign a value directly to a computed property without a setter?

You will get an error because computed properties without a setter are read-only. To assign values, you must define a setter function.

advanced

Show a simple example of a writable computed property in Vue's Composition API.

Example:
<pre>const fullName = computed({
  get: () =&gt; firstName.value + ' ' + lastName.value,
  set: (val) =&gt; {
    const parts = val.split(' ')
    firstName.value = parts[0]
    lastName.value = parts[1] || ''
  }
})</pre>

What does a computed property in Vue's Composition API do?

A Caches a value and updates only when dependencies change

B Runs a function every time the component renders

C Stores a static value that never changes

D Directly modifies reactive state

Computed properties cache their result and only update when their reactive dependencies change.

How do you import the computed function in Vue 3 Composition API?

A import computed from 'vue3'

B import computed from 'vue-computed'

C import { Computed } from 'vue'

D import { computed } from 'vue'

The correct import is import { computed } from 'vue'.

What will happen if you try to assign a value to a read-only computed property?

A It will update the value silently

B It will throw an error

C It will ignore the assignment

D It will convert to a reactive ref

Read-only computed properties throw an error if you try to assign a value to them.

Which of these is a correct way to define a computed property?

A const total = computed(() => price.value + tax.value)

B const total = computed(price.value + tax.value)

C const total = computed = () => price + tax

D const total = computed { return price + tax }

Computed properties must be created by calling computed with a function.

What is the main benefit of using computed over a method in Vue?

A Methods are reactive but computed are not

B Methods automatically update when dependencies change

C Computed properties cache results for better performance

D Computed properties can only be used in templates

Computed properties cache their results and only recompute when dependencies change, improving performance.

Explain how to create and use a computed property in Vue's Composition API.

Think about how you make a reactive value that updates automatically.

Describe the difference between a computed property and a method in Vue's Composition API.

Consider performance and when values are recalculated.