useFetch和$fetch的区别【Nuxt3】

## 前言

在`Nuxt3` 中，`useFetch` 和 `$fetch` 是两个常用的工具，分别用于进行数据获取和 `API` 请求。尽管它们在功能上看似相似，实际应用场景和背后的工作机制却有所不同。

通过这篇文章，我们将深入探讨 `useFetch` 和 `$fetch` 的区别、它们的各自作用以及适用场景，最终帮助开发者在使用 `Nuxt3` 时做出明智的选择。

### 什么是 Nuxt 3？

`Nuxt3` 是基于 `Vue3` 的服务端渲染（`SSR`）框架，旨在简化复杂的 `Vue` 应用的开发流程。`Nuxt` 提供了许多增强的功能，如自动路由生成、服务端渲染、静态网站生成、`API` 数据预获取等。在数据获取方面，`Nuxt 3` 引入了多个工具和钩子函数，`useFetch` 和 `$fetch` 就是其中的两大核心工具。

<!-- more -->

## useFetch

`useFetch` 是 `Nuxt3` 提供的一个特殊的组合式 `API`，用于在组件中执行数据获取请求。它的主要特点是能够与 `Nuxt` 的服务端渲染（`SSR`）无缝集成，自动处理请求的生命周期，并支持对数据进行预获取（`Prefetch`）。`useFetch` 支持同时在客户端和服务端运行，并能够自动识别执行环境。

### 特点

1. 自动 `SSR` 支持：能够在服务端预取数据，并在客户端进行数据的重用。
2. 支持懒加载（`Lazy fetch`）和缓存。
3. 与 `Vue3` 的响应式系统集成，支持数据的自动更新。
4. 可以与其他组合式 `API`（如 `useAsyncData`）结合使用，方便管理异步数据。

### 示例

```html
<script setup>
const { data, pending, error } = useFetch('https://api.example.com/data')
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <div v-else>{{ data }}</div>
</template>
```

在上面的例子中，`useFetch` 被用于在组件初始化时从 `https://api.example.com/data` 获取数据，并通过 `Vue` 的响应式系统自动更新组件状态。这种数据获取方法非常适合服务端渲染和静态页面生成的场景。

## $fetch

`$fetch` 是一个与 `useFetch` 不同的工具，它是 `Nuxt3` 内置的一个轻量级的 `HTTP` 请求库，用于在代码的任意地方执行 `API` 请求。相比 `useFetch`，它更类似于 `axios` 或 `fetch API`，但在 `Nuxt` 环境下经过了优化。

### 特点

1. 支持在任何地方使用：包括 `Vue` 组件、`Nuxt` 插件、服务端中间件等。
2. 内置对跨域、错误处理、超时等常见问题的处理。
3. 灵活性高：可以自定义请求头、请求方法、序列化参数等。
4. 支持客户端和服务端环境下的无缝运行。

### 示例

```html
<script setup>
import { $fetch } from 'ohmyfetch'

const fetchData = async () => {
  try {
    const data = await $fetch('https://api.example.com/data')
    console.log(data)
  } catch (error) {
    console.error('Fetch error:', error)
  }
}

fetchData()
</script>
```

在这个例子中，`$fetch` 被用于从 `API` 获取数据。它没有与 `Nuxt` 的 `SSR` 或响应式系统紧密集成，因此更适合用于那些不需要响应式数据绑定的场景，例如数据预处理、插件开发等。

## 核心区别

`useFetch` 与 `$fetch` 的核心区别
尽管 `useFetch` 和 `$fetch` 都可以用于获取数据，但它们的适用场景和技术细节却存在明显差异。以下是两者的核心区别：

### 1. SSR 集成与客户端渲染

- `useFetch`：是专为服务端渲染和客户端渲染无缝集成而设计的。它能够自动识别当前的渲染环境，并根据环境自动在服务端或客户端执行数据请求。在服务端渲染过程中，`useFetch` 会预先获取数据，并将数据注入到客户端，避免了页面的闪烁或延迟渲染问题。
- `$fetch`：虽然 `$fetch` 也可以在服务端和客户端执行请求，但它并没有自动集成 `SSR` 的能力。它更类似于传统的 HTTP 请求工具，适用于在需要手动管理数据请求和状态的场景中使用。

### 2. 响应式数据绑定

- `useFetch`：与 `Vue` 的响应式系统集成得很好，返回的数据会自动转换为响应式的，这意味着当数据变化时，Vue 组件会自动重新渲染。因此，`useFetch` 更适合需要在页面中直接展示数据的场景，例如列表渲染、表单填充等。
- `$fetch`：作为一个普通的 `HTTP` 请求库，`$fetch` 返回的并不是响应式数据。如果你希望对数据进行响应式管理，需要手动将其转换为响应式状态。例如，可以使用 `reactive` 或 `ref` 来处理数据的变化。

### 3. 数据缓存与懒加载

- `useFetch`：支持数据的懒加载和缓存。懒加载意味着可以推迟数据请求，直到某个条件满足时才执行；缓存则能提高性能，避免重复的网络请求。
- `$fetch`：没有内置的懒加载或缓存机制，它仅仅是一个简单的 `HTTP` 请求工具。如果需要缓存或懒加载功能，需要手动实现。

## 总结：如何选择 useFetch 和 $fetch？

选择使用 `useFetch` 还是 `$fetch` 取决于你的使用场景和需求。

- 选择 `useFetch`：当你需要与组件生命周期集成，并且希望数据获取能够自动响应式更新时，useFetch 是一个理想的选择。它特别适合在 `SSR` 场景下进行数据预取，并且可以无缝集成到 `Nuxt` 的静态站点生成流程中。
- 选择 `$fetch`：当你需要在非组件环境（如插件、中间件或独立函数）中进行 `API` 请求时，`$fetch` 提供了更高的灵活性。它是一个通用的 `HTTP` 请求工具，适合于那些不需要 `SSR` 集成或响应式数据的场景。

总结来说，在 `Nuxt3` 中，`useFetch` 是为那些需要`数据预获取`和 `SSR` 场景而设计的强大工具，而 `$fetch` 则为更加`灵活的API请求场景`提供了简洁的解决方案。在开发中，根据项目需求合理选择，能够极大提升开发效率。