useFetch 不僅僅是一個 HTTP 請求函數，它是一個會監聽變數的機器人。
1 核心概念 兩大更新技巧
useFetch 提供兩種更新資料的方式：
1. 手動更新 (refresh)
當你解構 useFetch 時，會得到一個 refresh 函數。呼叫它，Nuxt 就會重新發送請求。
const { data, refresh } = await useFetch('/api/time')
// 綁定在按鈕上： @click="refresh()"
2. 自動連動 (Reactivity)
如果你在 useFetch 的 URL 或參數中放入了 ref 變數，當這個變數改變時，Nuxt 會自動重新抓取資料。
const page = ref(1)
// 當 page.value 變了，useFetch 會自動重跑！
const { data } = await useFetch('/api/posts', {
query: { _page: page }
})
2 給 Claude Code 的中文指令 Prompt
我們要製作一個具備「分頁功能」的文章列表，來體驗自動重新抓取。
請複製以下指令給 Claude：
請建立一個具備分頁功能的文章列表頁面：
- 建立新頁面
app/pages/pagination.vue。 - 定義一個響應式變數
page，預設值為 1。 - 使用
useFetch抓取https://jsonplaceholder.typicode.com/posts。 - 設定
query參數：{ _page: page, _limit: 5 }。- 注意：請直接將 page ref 傳入 query 物件，不要傳 page.value，這樣才能啟用自動監聽功能。
- 解構回傳值取得
data(命名為posts),pending,refresh。 - 在 template 中：
- 顯示目前的頁碼。
- 顯示文章列表 (
v-for)。 - 加上「上一頁」按鈕 (
page > 1時才啟用，點擊後page--)。 - 加上「下一頁」按鈕 (點擊後
page++)。 - 加上一個「手動重新整理」按鈕 (點擊後呼叫
refresh())。
- 在
app/pages/index.vue加入連往此頁的連結。
3 驗收重點
請檢查 Claude 完成後的結果：
自動連動測試：
點擊「下一頁」，page 變成了 2。觀察：文章列表有沒有自動變換？
成功：你完全沒寫
watch，但資料自己更新了。這是 Nuxt useFetch 最強大的特性。 失敗：如果按下一頁只有數字變、列表沒變，代表 Claude 可能錯誤地寫成了
page.value。 Loading 狀態：
當你快速切換頁面時，應該會短暫看到 pending 狀態（如果你有實作 Loading UI）。
手動重新整理：
- 打開瀏覽器的 Network tab (F12 → Network)。
- 點擊「手動重新整理」按鈕。
- 你應該會看到一個新的 API 請求發送出去。
⚠️ 架構師筆記 (Watch 陷阱)
很多新手會寫成這樣：
useFetch(..., { query: { page: page.value } }) ❌
警告：如果你加了 .value，你就只是傳了一個死掉的數字 (純值)進去。Nuxt 不知道它原本是個變數，所以變數改了 Nuxt 也不會理你。
記住：在 Nuxt 的 useFetch 參數裡，把 ref 整顆傳進去，不要拆開。