Computed property là một giá trị reactive được dẫn xuất từ state reactive khác. Nó tự động tính toán lại khi các dependency của nó thay đổi, và — quan trọng nhất — cache kết quả nên chỉ chạy lại khi thứ nó phụ thuộc thực sự thay đổi.
vue
<script setup>
import { ref, computed } from "vue";
const firstName = ref("Ann");
const lastName = ref("Lee");
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
// fullName tự cập nhật mỗi khi firstName HOẶC lastName thay đổi
</script>
<template>
<p>{{ fullName }}</p> <!-- tự động unwrap, như một ref -->
</template>