A computed property is a value derived from reactive state that Vue caches. It tracks its reactive dependencies on its own and re-runs only when one of them changes.
<script setup>
import { ref, computed } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
// Re-runs only when firstName or lastName changes
const fullName = computed(() => `${firstName.value} ${lastName.value}`)
// Writable: assigning fullNameWritable.value calls set
const fullNameWritable = computed({
get: () => fullName.value,
set: (value) => { [firstName.value, lastName.value = ''] = value.split(' ') }
})
</script>
In the Composition API, computed() returns a computed ref. You read it with .value in script, and the template unwraps it for you. Computed properties are read-only by default, and passing an object with get and set makes one writable.
Caching helps performance, and the declarative style keeps templates readable. The Options API puts the same getters under its computed option. Keep getters pure, with no side effects.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓