在 Vue 3 中，computed 是一個非常重要的響應式 API，用于聲明依賴于其他響應式狀態的派生狀態。以下是 computed 的詳細用法：

1. 基本用法

import { ref, computed } from 'vue'export default {setup() {const firstName = ref('張')const lastName = ref('三')const fullName = computed(() => {return firstName.value + ' ' + lastName.value})return {firstName,lastName,fullName}}
}

2.可寫的計算屬性

計算屬性默認是只讀的，但你可以通過提供 get 和 set 函數來創建一個可寫的計算屬性。

import { ref, computed } from 'vue'export default {setup() {const firstName = ref('張')const lastName = ref('三')const fullName = computed({// getterget() {return firstName.value + ' ' + lastName.value},// setterset(newValue) {[firstName.value, lastName.value] = newValue.split(' ')}})return {firstName,lastName,fullName}}
}

3.計算屬性緩存

計算屬性會基于它們的響應式依賴進行緩存。只有在相關響應式依賴發生改變時才會重新求值。

const now = computed(() => Date.now())
// 這個計算屬性永遠不會更新，因為 Date.now() 不是響應式依賴

計算屬性和方法的區別：計算屬性是基于它們的依賴進行緩存的，而方法總是會在重新渲染時再次執行函數。

// 方法 - 每次訪問都會執行
function getFullName() {return firstName.value + ' ' + lastName.value
}// 計算屬性 - 只有依賴變化時才會重新計算
const fullName = computed(() => {return firstName.value + ' ' + lastName.value
})

4.最佳實踐

避免副作用：計算屬性的計算函數應只做計算而不產生副作用（如異步請求或更改 DOM)

避免直接修改計算屬性：除非你明確提供了 setter

簡化模板：將復雜邏輯移到計算屬性中，保持模板簡潔