组件选项

了解如何从 Nuxt 2 的组件选项迁移到 Nuxt 3 的组合式函数。

`asyncData` 和 `fetch`

Nuxt 3 提供了从 API 获取数据的新选项。

同构 Fetch

在 Nuxt 2 中，你可能会使用 @nuxtjs/axios 或 @nuxt/http 来获取数据——或者只是使用带 polyfill 的全局 fetch。

在 Nuxt 3 中，你可以使用一个全局可用的 fetch 方法，它与 Fetch API 具有相同的 API，或者使用 $fetch 方法，它基于 unjs/ofetch。它有许多好处，包括：

当它运行在服务器端时，它会“智能地”进行直接 API 调用；当它运行在客户端时，它会对你的 API 进行客户端调用。（它也可以处理调用第三方 API。）
此外，它带有便利功能，包括自动解析响应和序列化数据。

你可以阅读更多关于直接 API 调用或获取数据的内容。

组合式函数

Nuxt 3 提供了用于获取数据的新的组合式函数：useAsyncData 和 useFetch。它们各自都有“lazy”变体（useLazyAsyncData 和 useLazyFetch），不会阻塞客户端导航。

在 Nuxt 2 中，你会在组件中使用类似如下的语法来获取数据：

export default {
  async asyncData ({ params, $http }) {
    const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
    return { post }
  },
  // 或者
  fetch () {
    this.post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
  },
}

在你的方法和模板中，你可以像使用组件提供的任何其他数据一样使用 post 变量。

使用 Nuxt 3，你可以在你的 setup() 方法或 <script setup> 标签中使用组合式函数来执行此数据获取：

<script setup lang="ts">
// 通过 `defineProps()`、`useRoute()` 等在任何地方定义参数
const { data: post, refresh } = await useAsyncData('post', () => $fetch(`https://api.nuxtjs.dev/posts/${params.id}`))
// 或者 — useFetch 是 useAsyncData 的便捷封装，当你只是执行简单 fetch 时
const { data: post, refresh } = await useFetch(`https://api.nuxtjs.dev/posts/${params.id}`)
</script>

你现在可以在你的 Nuxt 3 模板中使用 post，或者调用 refresh 来更新数据。

尽管名称相似，但 useFetch 并不是 fetch() 钩子的直接替代品。相反，useAsyncData 替代了这两个钩子，并且更加可定制；它不仅能从端点获取数据。当你只是简单地从端点获取数据时，useFetch 是 useAsyncData 的便捷封装。 ::

迁移

在你的页面/组件中将 asyncData 钩子替换为 useAsyncData 或 useFetch。
在你的组件中将 fetch 钩子替换为 useAsyncData 或 useFetch。

`head`

`key`

你现在可以在 definePageMeta 编译器宏中定义一个键。

app/pages/index.vue

- <script>
- export default {
-   key: 'index'
-   // 或方法
-   // key: route => route.fullPath
- }
+ <script setup>
+ definePageMeta({
+   key: 'index'
+   // 或方法
+   // key: route => route.fullPath
+ })
</script>

`layout`

`loading`

此功能在 Nuxt 3 中尚不支持。

`middleware`

`scrollToTop`

此功能在 Nuxt 3 中尚不支持。如果你想覆盖 vue-router 的默认滚动行为，你可以在 ~/router.options.ts 中这样做（参见文档了解更多信息）。与 key 类似，在 definePageMeta 编译器宏中指定它。

app/pages/index.vue

- <script>
- export default {
-   scrollToTop: false
- }
+ <script setup>
+ definePageMeta({
+   scrollToTop: false
+ })
</script>

`transition`

`validate`

Nuxt 3 中的 validate 钩子只接受一个参数，即 route。就像在 Nuxt 2 中一样，你可以返回一个布尔值。如果你返回 false 且找不到其他匹配项，这意味着 404。你也可以直接返回一个带有 status/statusText 的对象，以立即用错误响应（不会检查其他匹配项）。

app/pages/users/[id].vue

- <script>
- export default {
-   async validate({ params }) {
-     return /^\d+$/.test(params.id)
-   }
- }
+ <script setup>
+ definePageMeta({
+   validate: async (route) => {
+     const nuxtApp = useNuxtApp()
+     return /^\d+$/.test(route.params.id)
+   }
+ })
  </script>

`watchQuery`

这在 Nuxt 3 中不支持。相反，你可以直接使用一个监听器来触发重新获取数据。

app/pages/users/[id].vue

<script setup lang="ts">
const route = useRoute()
const { data, refresh } = await useFetch('/api/user')
watch(() => route.query, () => refresh())
</script>