Nuxt 是什么?

nuxt 对于 vue 就如同 next 对于 react。它们产生的原因，主要是因为像 vue,react 它们都只是视图层的框架。然而前端应用，从代码编写到最终的真正上线，还要经过一系列流水线师的构建步骤。

比如在 webpack 中一个 .vue 文件就要经过 vue-loader/plugin 分发 js 到 ts-loader,babel-loader 等等进行处理，里面的 scss 也要经过 sass-loader,postcss-loader,css-loader,style-loader,mini-css-extract-plugin/loader 等等的依次处理，才能变成真正在浏览器中，运行的代码。

假如这些都让开发者来进行配置，显然增加了许多的学习成本。大部分开发者，压根就不想为了构建一个应用去学习这么多知识，还要付出大量的试错成本，我们更多的想法是: 今天早点下班。老板也不想给我们这种"无产出"时间来白白浪费工资，他只想守在我们身旁，问我们:"今天能不能上线？今晚能不能上线？"。所以像 next， nuxt 这些框架解决方案就顺势而出了，它们的目标就是提供构建视图框架应用，开箱即用的解决方案。这个解决方案不止包括 SSR，还包括 SPA 和 SSG 等等模式。

nuxt3中提供的数据获取函数有以下四个：

• useFetch
• useLazyFetch
• useAsyncData
• useLazyAsyncData

注意：它们都必须在setup或生命周期钩子中使用

useAsyncData

在页面、组件或插件中都可以使用useAsyncData获取那些异步数据。比如：

const {
  data: Ref<DataT>, // 返回的数据
  pending: Ref<boolean>, // 加载状态指示器
  refresh: (force?: boolean) => Promise<void>, // 强制刷新函数
  error?: any // 请求失败的错误信息
} = useAsyncData(
  key: string,// 唯一键用于多次请求结果去重
  fn: () => Object,// 返回数值的异步函数
  // lazy - 是否在路由之后才请求数据，server - 是否在服务端请求数据
  options?: { lazy: boolean, server: boolean } 
)

获取待办事项数据，index.vue：

<template>
  <div>
    <!-- 待办列表 -->
    <div v-for="todo in todos" :key="todo.id">
      <input type="checkbox" v-model="todo.completed">
      <strong>{{todo.title}}</strong>
    </div>
  </div>
</template>
<script setup lang="ts">
const { data: todos } = await useAsyncData(
  'count', () => $fetch('/api/todos'))
</script>

$fetch使用参考ohmyfetch

useLazyAsyncData

该方法等效于useAsyncData，仅仅设置了lazy选项为true，也就是它不会阻塞路由导航，这意味着我们需要处理data为null的情况（或者通过default选购给data设置一个默认值）

useFetch

页面、组件或者插件中可以使用useFetch获取任意URL资源。

useFetch是对useAsyncData包装，自动生成key同时推断响应类型，用起来更简单。

看下面方法签名，基本完全相同：

const {
  data: Ref<DataT>,
  pending: Ref<boolean>,
  refresh: (force?: boolean) => Promise<void>,
  error?: any
} = useFetch(url: string, options?)

useLazyFetch

该方法等效于useFetch，仅设置了lazy选项为true，所以它不会阻塞路由导航，这意味着我们需要处理data为null的情况（或者通过default选购给data设置一个默认值）