## 前言

在`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` 支持同时在客户端和服务端运行，并能够自动识别执行环境。

### 特点

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

useFetch和$fetch的区别【Nuxt3】

## 直接看代码

### 上传组件
```html
      <el-upload
        action="https://up-z0.qiniup.com"
        :data="fileData"
        v-model="fileList"
        class="upload-demo"
        drag
        :before-upload="selectNewFile"
        multiple
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          拖拽文件到此处，或 <em>点击</em> 开始上传文件
        </div>
        <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500kb
          </div>
        </template>
      </el-upload>
```



### ts代码
```ts

import { UploadFilled } from "@element-plus/icons-vue";
import type { UploadUserFile, UploadRawFile } from "element-plus";

const fileData = ref<any>({});

const fileList = ref<UploadUserFile[]>([]);
const selectNewFile = async (rawFile: UploadRawFile) => {
  console.log(rawFile);
  // 调用自己的后端，获取七牛云token
  const res = await doApi.get<{ token: string }>("file/getUploadToken");
  console.log(res);
  if (res.c == 200) {
    // 封装七牛云特殊字段参数
    fileData.value = {
      token: res.d?.token,
    };
    console.log(fileData.value);
    return true;
  }
  return false;
};
```

### 易错点

`fileData` 是封装七牛云特定参数使用的变量，但注意，改变其值时，要使用 `.value` 完全重置其内容，否则调用七牛云接口时，使用的时默认变量值，很怪很奇葩，垃圾 `Element` ！。

Element-Plus上传文件到七牛云

大家好久不见。

原帖链接：https://www.instagram.com/p/C6vv7Cqyx0t/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==

![image](https://images.oldmoon.top/images/beauty/1725270281019-0.jpg)



![image](https://images.oldmoon.top/images/beauty/1725270281019-1.jpg)

![image](https://images.oldmoon.top/images/beauty/1725270281019-2.jpg)

![image](https://images.oldmoon.top/images/beauty/1725270281019-3.jpg)

20240902欣赏：귀여운

## 简介

`box-shadow` 是 CSS 中用于为元素添加阴影效果的属性。它可以用来创建简单的阴影、内阴影或者复杂的多层阴影。这个属性接受一系列参数来定义阴影的形状、位置、模糊程度、扩展程度和颜色。下面是 `box-shadow` 属性的参数详解：

### 基本语法

```css
box-shadow: [inset] x-offset y-offset blur-radius spread-radius color;
```



### 参数详解

1. **`inset` (可选)**:
> - **描述**: 定义阴影是外阴影还是内阴影。
> - 取值:
>   - 默认情况下（不指定），阴影是外阴影。
>   - 如果指定了 `inset`，阴影将变成内阴影，显示在元素内部。
>
> - **示例**: `inset`

2. **`x-offset`**:

> - **描述**: 阴影在水平方向的偏移量，即阴影相对于元素的水平移动。
> - 取值: 任何有效的长度值（如 `px`,`em`,`rem`，负值）。
>   - 正值：阴影向右偏移。
>   - 负值：阴影向左偏移。
> - **示例**: `10px` (阴影向右偏移10像素), `-5px` (阴影向左偏移5像素)

3. **`y-offset`**:

> - **描述**: 阴影在垂直方向的偏移量，即阴影相对于元素的垂直移动。
> - 取值: 任何有效的长度值（如 `px`,`em`,`rem`，负值）。
>   - 正值：阴影向下偏移。
>   - 负值：阴影向上偏移。
> - **示例**: `5px` (阴影向下偏移5像素), `-3px` (阴影向上偏移3像素)

4. **`blur-radius` (可选)**:

>  - **描述**: 定义阴影的模糊半径。值越大，阴影越模糊和扩散；如果设为 `0`，阴影将是清晰的边界。
>  - **取值**: 任何有效的长度值（如 `px`, `em`）。默认为 `0`，表示没有模糊。
>  - **示例**: `15px` (阴影模糊半径为15像素)

5. **`spread-radius` (可选)**:

>   - **描述**: 定义阴影的扩展半径。正值会使阴影扩大，负值会使阴影收缩。
>   - **取值**: 任何有效的长度值（如 `px`, `em`）。默认为 `0`，表示没有扩展。
>   - **示例**: `10px` (阴影扩展10像素), `-5px` (阴影缩小5像素)

6. **`color` (可选)**:

>   - **描述**: 定义阴影的颜色。如果不指定颜色，默认使用 `color` 属性值。
>   - **取值**: 任何有效的颜色值（如 `#000`, `rgba(0, 0, 0, 0.5)`）。
>   - **示例**: `rgba(0, 0, 0, 0.5)` (半透明的黑色)

### 多重阴影

你可以通过逗号分隔的方式为一个元素指定多个阴影。每个阴影将会按照顺序叠加在前一个阴影之上。

```css
box-shadow: 10px 10px 5px #888888, -5px -5px 5px #444444;
```

### 示例

```css
/* 单个外阴影 */
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);

/* 内阴影 */
box-shadow: inset 5px 5px 10px 0px rgba(0, 0, 0, 0.5);

/* 多重阴影 */
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3), -3px -3px 5px 0px rgba(255, 255, 255, 0.3);
```

### 常见用法举例说明

- **单个外阴影**: `10px 10px 5px 0px rgba(0, 0, 0, 0.75)` 表示阴影向右下偏移 `10px`，模糊半径为 `5px`，颜色为半透明的黑色。
- **内阴影**: `inset 5px 5px 10px 0px rgba(0, 0, 0, 0.5)` 表示一个内阴影，向右下偏移 `5px`，模糊半径为 `10px`，颜色为半透明的黑色。
- **多重阴影**: `3px 3px 5px 0px rgba(0, 0, 0, 0.3)` 和 `-3px -3px 5px 0px rgba(255, 255, 255, 0.3)` 表示两个阴影，一个向右下偏移，另一个向左上偏移，分别有不同的颜色和模糊效果。

通过合理调整这些参数，`box-shadow` 可以用来创建丰富多样的视觉效果，如浮动效果、嵌入效果、发光效果等。

Css设置div阴影：box-shadow详解

最近，国产游戏《黑神话：悟空》可谓火遍全网。这款备受期待的3A大作，不仅在游戏性上取得了巨大的成功，还巧妙地将中国传统文化与现代游戏技术相结合，带领玩家在虚拟世界中穿越历史，探索那些隐藏在游戏场景中的真实古建筑。更令人惊喜的是，通关这款游戏的玩家还可以获得免费的景区门票，这一举动无疑为全国各地的文旅景点注入了新的活力。

![](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1724932365869-0.jpg)



### 游戏与现实的交汇：那些在《黑神话》中的真实建筑

《黑神话：悟空》以精美的画面和深厚的文化底蕴著称，其中高度还原的中式古建筑更是引发了广泛关注。从古刹到宝殿，从石窟到牌楼，这些充满历史感的建筑元素都源自中国大地上真实存在的古迹。

游戏中，玩家可以在虚拟世界中欣赏到花果山的秀丽风光、灵岩寺的庄严肃穆、大漈景区的古朴宁静……这些景点不仅在游戏中展现出其独特的魅力，更在现实中成为了众多玩家心中的“打卡”圣地。

![](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1724932458276-0.png)

### 通关即免费游景区：文旅界的“卷”文化

随着《黑神话：悟空》的爆火，各地的文旅部门也纷纷行动起来。通过与这款游戏的联动，许多景区推出了通关免票的活动，让玩家们在通关游戏后，可以免费游览这些真实存在的历史古迹。

- **江苏连云港花果山**：作为孙悟空的“老家”，花果山风景区率先推出通关免票活动。玩家可以在8月22日至12月31日期间，凭借通关证明免费游玩花果山，这无疑让人感受到游戏与现实的深度结合。
- ![](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1724932752705-0.jpg)
- **山东济南灵岩寺**：通关游戏第三章的玩家可以终生免费畅游灵岩寺景区。灵岩寺的墓塔林在游戏中完美再现，而现实中的这一景点也因其历史和文化价值而备受瞩目。
- ![](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1724932752705-2.jpg)
- **浙江丽水大漈景区**：通关第四章的玩家可以终生免费游览丽水大漈景区。这里的实景与游戏中的场景相得益彰，让人仿佛穿越到了游戏中的世界。
- ![](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1724932752705-1.png)

### 西游文化的传承与弘扬：从虚拟到现实

《黑神话：悟空》不仅带动了游戏界的热潮，也在全国范围内掀起了一股西游文化的热潮。作为西游记文化的发源地，吐鲁番火焰山景区、河南嵖岈山风景区、江苏淮安古城等地都因这款游戏而吸引了更多游客。

这些景区借助游戏的热度，通过各种创新活动吸引游客的同时，也弘扬了中国的传统文化。这不仅让玩家们在现实中体验到了与游戏中相似的冒险，还让更多人了解了这些古老的历史遗迹。

### 游戏与文化的双向赋能

《黑神话：悟空》不仅是一款成功的游戏作品，更是中国文化在全球范围内的一次成功输出。通过游戏的虚拟世界，玩家们可以探索那些古老的中国建筑与文化，而这些景区也因游戏的火爆而焕发出新的生机。

在这场游戏与文化的双向赋能中，我们看到了中国传统文化的无穷魅力，也看到了现代技术与历史文化的完美结合。或许，正如一位玩家所言：“你曾在异国他乡驰骋，如今，你终于可以在自己的家乡做英雄了。”

玩黑神话免费旅游游景区？？？

twitter:card

twitter:title

https://images.oldmoon.top/images/dingdangdog/oldmoon.png

twitter:image

努力做一只帅气、有才、豁达的老狗！

twitter:description