useFetch和$fetch的区别【Nuxt3】

前言

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

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

什么是 Nuxt 3？

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

useFetch

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

特点

自动 SSR 支持：能够在服务端预取数据，并在客户端进行数据的重用。
支持懒加载（Lazy fetch）和缓存。
与 Vue3 的响应式系统集成，支持数据的自动更新。
可以与其他组合式 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 环境下经过了优化。

特点

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

示例

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请求场景提供了简洁的解决方案。在开发中，根据项目需求合理选择，能够极大提升开发效率。

目录

前言