computed 和 methods 的差異？

核心差異：快取（Caching）

computed 有快取機制，只有當它的響應式依賴發生變化時才重新計算。
methods 每次呼叫都會重新執行，沒有快取。

範例

import { ref, computed } from 'vue'

const count = ref(0)

// computed：有快取，count 不變時不重新計算
const doubled = computed(() => {
  console.log('computed 執行')
  return count.value * 2
})

// methods：每次呼叫都執行
function getDoubled() {
  console.log('method 執行')
  return count.value * 2
}

<template>
  <!-- 渲染 3 次 doubled，但 computed 只執行 1 次 -->
  <p>{{ doubled }}</p>
  <p>{{ doubled }}</p>
  <p>{{ doubled }}</p>

  <!-- 呼叫 3 次，執行 3 次 -->
  <p>{{ getDoubled() }}</p>
  <p>{{ getDoubled() }}</p>
  <p>{{ getDoubled() }}</p>
</template>

比較表

特性	computed	methods
快取	✅ 有（依賴不變則不重算）	❌ 無
使用方式	像屬性一樣存取（不加 ()）	需要加 () 呼叫
接受參數	❌ 不能	✅ 可以
適合場景	從現有資料派生出新資料	處理事件、有副作用的操作
回傳值	必須有	可有可無

何時使用 computed？

// ✅ 從現有資料計算出新值
const fullName = computed(() => firstName.value + ' ' + lastName.value)

// ✅ 過濾清單
const activeUsers = computed(() => users.value.filter(u => u.active))

// ✅ 格式化資料
const formattedPrice = computed(() => '$' + price.value.toFixed(2))

何時使用 methods？

// ✅ 事件處理
function handleClick() { /* ... */ }

// ✅ 有副作用（API 請求、修改資料）
async function fetchData() { /* ... */ }

// ✅ 需要傳參數
function formatDate(date) { /* ... */ }