Nuxt 3 有哪些数据获取方式？useFetch 和 useAsyncData 怎么选？

Nuxt 3 提供两个核心组合式函数：useFetch 和 useAsyncData。useFetch 是 useAsyncData + $fetch 的语法糖，99% 场景用 useFetch 即可；useAsyncData 适合需要自定义获取逻辑（如依赖多个 API 聚合数据）的场景。两者都在 SSR 时于服务端执行，结果序列化到 payload 中供客户端 hydration 复用，避免重复请求。底层 HTTP 客户端是 ofetch（$fetch），支持服务端直接调用，无跨域问题。

追问

• useFetch 的 key 是干什么用的？不写会怎样？
• SSR 时数据怎么从服务端传到客户端？hydration mismatch 怎么避免？
• $fetch 和 useFetch 的区别是什么？能不能在组件里直接用 $fetch？
• server/api 里的接口怎么和 useFetch 配合？
• 如何给 useFetch 加请求缓存和去重？

写段代码

js
// 自定义 key + transform
const { data, pending } = await useFetch(
  `/api/user/${route.params.id}`,
  {
    key: `user-${route.params.id}`,
    transform: (res) => res.data,
    getCachedData(key, nuxt) {
      return nuxt.payload.data[key]
    }
  }
)