计算属性是一个从其他响应式状态派生的响应式值。当它的依赖项改变时，它会自动重新计算，并且——至关重要的是——缓存它的结果，因此只有当它所依赖的内容实际改变时才会重新运行。
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>