計算プロパティは、他のリアクティブな状態から導出されるリアクティブな値です。依存関係が変わると自動的に再計算され、そして — 重要なことに — 結果をキャッシュするため、依存する何かが実際に変わるときだけ再実行されます。
vue
<script setup>
import { ref, computed } from "vue";
const firstName = ref("Ann");
const lastName = ref("Lee");
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
// fullName updates automatically whenever firstName OR lastName changes
</script>
<template>
<p>{{ fullName }}</p> <!-- auto-unwrapped, like a ref -->
</template>
なぜ重要なのか
vue
<script setup>
const items = ref([/* ...1000 items... */]);
const expensiveTotal = computed(() => {
return items.value.reduce((sum, i) => sum + i.price, 0); // runs ONCE per change
});
</script>
<template>
<p>{{ expensiveTotal }}</p>
<p>{{ expensiveTotal }}</p> <!-- reused from cache — NOT recomputed -->
</template>