computed()
Creates a cached, reactive derived value from other reactive sources.
Syntax
computed<T>(getter) | computed<T>({ get, set })Parameters
| Name | Type | Required | Description |
|---|---|---|---|
getter | () => T | No | Function deriving the value from reactive dependencies. |
options | object | No | Object with get and set for a writable computed. |
Returns
ComputedRef<T> | WritableComputedRef<T> — A ref-like cached value.
Examples
<script setup lang="ts">
import { ref, computed } from 'vue';
const price = ref(100);
const qty = ref(3);
const total = computed(() => price.value * qty.value);
</script>
<template><p>{{ total }}</p></template>
<script setup>
import { ref, computed } from 'vue';
const first = ref('Ada');
const last = ref('Lovelace');
const full = computed({
get: () => `${first.value} ${last.value}`,
set: (v) => ([first.value, last.value] = v.split(' ')),
});
</script>
Notes
Computed values are cached and only re-evaluate when a tracked dependency
changes, making them more efficient than methods. Keep getters pure (no side
effects). Provide get/set for a writable computed.