{{ fullName }}
\n\n```\n\n**Writable computed:**\n```typescript\nconst fullName = computed({\n get: () => `${firstName.value} ${lastName.value}`,\n set: (newValue) => {\n [firstName.value, lastName.value] = newValue.split(\" \")\n }\n})\n```\n\n**Key:** computed for derived state."}}]}computed — derived reactive state.
Basic:
1<script setup>2import { ref, computed } from "vue"34const firstName = ref("John")5const lastName = ref("Doe")67const fullName = computed(() => `${firstName.value} ${lastName.value}`)8</script>910<template>11 <p>{{ fullName }}</p>12</template>
Writable computed:
1const fullName = computed({2 get: () => `${firstName.value} ${lastName.value}`,3 set: (newValue) => {4 [firstName.value, lastName.value] = newValue.split(" ")5 }6})
Key: computed for derived state.