隨著專案功能與操作愈來愈複雜，在模板內寫入過多的邏輯運算式，會讓程式看起來很雜亂並且也不利於維護，因此可以透過使用計算屬性computed來改善此問題。

計算屬性Computed 是什麼？

將邏輯運算式提取到 computed 屬性中，以便於處理複雜的計算。

以下是官方文件的範例 (Composition API)

在未使用計算屬性時，模板看起來很複雜也不容易理解。

<template>
  <p>Has published books:</p>
  <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
</template>

透過定義計算屬性publishedBooksMessage，模板看起來就簡潔許多，可以更專注在資料的顯示，而不是複雜的運算式，其中 computed() 方法期望接收一個 getter 函數，它的返回值是一個計算屬性 ref，此外，計算屬性會自動追蹤其依賴的資料屬性，當 author.books 發生改變時，任何依賴於 publishedBooksMessage 的綁定都會被同時更新。

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 一個計算屬性 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

方法 Methods

雖然將同樣的函數定義為一個方法，可以和使用 computed 達到相同的結果，只不過使用方法調用會在重新渲染時再次執行該函數，因此，當有巨大的數組要進行邏輯運算時，會顯得非常耗能和效率差。

但是計算屬性值會基於其響應式依賴被緩存，也就是說只要 author.books 不改變，無論多少次訪問 publishedBooksMessage 都會立即返回先前的計算結果，而不用重複執行 getter 函數。

總結： Computed vs. Methods

• Computed (計算屬性)
  會將計算後的結果緩存，只要其相依的資料沒有改變，就不會重複執行運算，而是直接返回緩存的結果。
• Methods (方法)
  無論相依的資料的資料是否有改變，每次方法被調用時都會重新執行運算。

參考資源

https://vuejs.org/guide/essentials/computed.html
https://zh-hk.vuejs.org/guide/essentials/computed.html
https://www.cythilya.tw/2017/04/15/vue-computed/
https://medium.com/@yhosutun2491/vue-%E5%89%8D%E7%AB%AF%E6%96%B0%E6%89%8B%E6%B7%B1%E5%85%A5%E7%B3%BB%E5%88%97-vue-computed-%E8%A8%88%E7%AE%97%E5%B1%AC%E6%80%A7-4a20540be80e
https://www.runoob.com/vue3/vu3-computed.html
https://book.vue.tw/CH1/1-3-computed-and-methods.html