>[success] # 計算屬性 -- computed 1. 在`Composition API`中，我們可以在 `setup `函數中使用 `computed `方法來編寫一個計算屬性 * 接收一個`getter`函數，并為 `getter `函數返回的值，返回一個不變的 `ref `對象 * 接收一個具有 `get `和 `set `的對象，返回**一個可變的（可讀寫）ref 對象** >[danger] ##### 案例 1. 下面案例返回是一個不變的響應式`ref `對象，因此進行改寫會報錯 ~~~ const count = ref(1) const plusOne = computed(() => count.value + 1) console.log(plusOne.value) // 2 plusOne.value++ // 錯誤 ~~~ >[danger] ##### 案例 1. 和 `option Api` 一樣可以定義`getter `和`setter`，傳入的是一個對象，但是此時返回一個**可變的（可讀寫）ref 對象** ~~~ const count = ref(1) const plusOne = computed({ get: () => count.value + 1, set: val => { count.value = val - 1 } }) plusOne.value = 1 console.log(count.value) // 0 ~~~ * 官網案例 ~~~ <script setup> import { ref, computed } from 'vue' const firstName = ref('John') const lastName = ref('Doe') const fullName = computed({ // getter get() { return firstName.value + ' ' + lastName.value }, // setter set(newValue) { // 注意：我們這里使用的是解構賦值語法 [firstName.value, lastName.value] = newValue.split(' ') } }) </script> ~~~ >[info] ## 調試鉤子 1. 在開發環境調試階段，vue 也為其 提供兩個鉤子函數`onTrack`和`onTrigger` * `onTrack`將在響應屬性或引用作為依賴項被跟蹤時被調用。 * `onTrigger`將在偵聽器回調被依賴項的變更觸發時被調用。 ~~~ const plusOne = computed(() => count.value + 1, { onTrack(e) { // 當 count.value 被追蹤為依賴時觸發 debugger }, onTrigger(e) { // 當 count.value 被更改時觸發 debugger } }) // 訪問 plusOne，會觸發 onTrack console.log(plusOne.value) // 更改 count.value，應該會觸發 onTrigger count.value++ ~~~ >[info] ## 官方地址 [computed](https://cn.vuejs.org/api/reactivity-core.html#computed) [# 計算屬性](https://cn.vuejs.org/guide/essentials/computed.html) [### 計算屬性調試](https://cn.vuejs.org/guide/extras/reactivity-in-depth.html#computed-debugging)