Computed Properties

Computed properties allow you to create values based on other reactive data. They automatically update when the data they depend on changes.

To create a computed property, use the computed() function.

<script setup>
import { ref, computed } from "vue";

const firstName = ref("John");
const lastName = ref("Smith");

const fullName = computed(() => {
  return firstName.value + " " + lastName.value;
});
</script>

<template>
  <p>{{ fullName }}</p>
</template>

The fullName value is calculated from firstName and lastName. When either value changes, the computed property updates automatically.

Computed properties help you keep logic clean and avoid repeating calculations in the template.