1. 手動觸發的特種兵：$fetch

如果說 useFetch 是在頁面載入時就自動出任務的正規軍，那 $fetch 就是接到命令才出動的特種兵。

它很單純：你呼叫它，它就去要資料。它不會自動執行，也不會使用我們前天提到的「外帶餐盒 (Payload)」機制。

最佳出場時機

$fetch 最適合用在使用者互動之後的行為，例如：

使用者填完表單，按下送出按鈕。
使用者點擊「載入更多」按鈕。
使用者在搜尋框輸入文字後，觸發搜尋。

範例：送出一個聯絡表單

使用 $fetch 處理表單送出

<script setup>
import { ref } from 'vue';

const name = ref('');
const message = ref('');
const isLoading = ref(false);

async function submitForm() {
  isLoading.value = true;
  try {
    // 在 submitForm 這個函式被呼叫時，才執行 $fetch
    const response = await $fetch('/api/contact', {
      method: 'POST',
      body: { name: name.value, message: message.value }
    });
    alert('成功送出！');
  } catch (error) {
    alert('送出失敗：' + error.data.message);
  } finally {
    isLoading.value = false;
  }
}
</script>

<template>
  <form @submit.prevent="submitForm">
    <input v-model="name" placeholder="姓名">
    <textarea v-model="message" placeholder="訊息"></textarea>
    <button type="submit" :disabled="isLoading">
      {{ isLoading ? '傳送中...' : '送出' }}
    </button>
  </form>
</template>

重點：useFetch 用於載入頁面，$fetch 用於處理動作。

2. 處理複雜訂單的萬能主廚：useAsyncData

useFetch 是個很棒的點餐系統，但它只接受「網址」這種訂單。如果您的訂單很複雜，就需要請出我們的萬能主廚 useAsyncData。

事實上，useFetch('/api/user') 只是 useAsyncData('user', () => $fetch('/api/user')) 的簡便寫法。

最佳出場時機

當您的資料來源不是一個簡單的 URL，而是需要：

呼叫一個第三方的 SDK (例如：內容管理系統 CMS、支付平台)。
同時發出多個 API 請求，再把結果組合成一份資料。
執行其他複雜的非同步程式邏輯。

範例：同時獲取文章和會員資料

使用 useAsyncData 處理複雜邏輯

<script setup>
// 第一個參數 'user-dashboard' 是此資料的唯一 key，用於快取
// 第二個參數是一個非同步函式，定義了獲取資料的複雜邏輯
const { data, pending } = await useAsyncData('user-dashboard', async () => {
  // 同時發出兩個請求
  const [articles, userProfile] = await Promise.all([
    $fetch('/api/my-articles'),
    $fetch('/api/me')
  ]);

  // 將兩份資料整理成一個物件再回傳
  return { articles, userProfile };
});
</script>

<template>
  <div v-if="pending">載入中...</div>
  <div v-else>
    <h2>{{ data.userProfile.name }} 的文章</h2>
    <ul>
      <li v-for="article in data.articles">{{ article.title }}</li>
    </ul>
  </div>
</template>

今日總結

今天過後，您就是一位資料獲取大師了！讓我們回顧一下三位專家的職責：

useFetch：頁面載入時的首選，簡單方便，自動處理一切。

$fetch：使用者互動後的選擇，手動精準觸發。

useAsyncData：處理複雜非同步邏輯時的王牌，提供最大的彈性。

恭喜！您已經完成了為期三天的資料獲取訓練營。您現在已經知道在各種情境下，該派遣哪位專家出馬，來為您的網站獲取寶貴的資料了！