组件选项

asyncData 和 fetch

Nuxt 3提供了从API获取数据的新方式。

同构Fetch

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

在Nuxt 3中，你可以使用全局可用的fetch方法（与Fetch API具有相同API）或使用unjs/ofetch的$fetch方法。它具有多项优势，包括：

1. 它会"智能地"处理直接API调用（如果在服务端运行），或者在客户端运行时向你的API发起客户端调用。（它也可以处理调用第三方API）
2. 此外，它还提供了便捷功能，包括自动解析响应和字符串化数据。

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

组合式API

Nuxt 3提供了新的数据获取组合式API：useAsyncData和useFetch。它们各自有"懒加载"变体（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>标签中使用组合式API执行此数据获取：

<script setup lang="ts">
// 通过`defineProps()`、`useRoute()`等方式定义params
const { data: post, refresh } = await useAsyncData('post', () => $fetch(`https://api.nuxtjs.dev/posts/${params.id}`) )
// 或者使用更简便的useFetch - 当只是执行简单获取时
const { data: post, refresh } = await useFetch(`https://api.nuxtjs.dev/posts/${params.id}`)
</script>

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

::注意 尽管名称相似，useFetch并不是fetch()钩子的直接替代品。useAsyncData才是这两个钩子的替代品，并且更加可定制化；它可以做的不仅仅是简单地从端点获取数据。useFetch是useAsyncData的一个便捷包装器，专门用于从端点获取数据。 ::

迁移指南

1. 在页面/组件中用useAsyncData或useFetch替换asyncData钩子
2. 在组件中用useAsyncData或useFetch替换fetch钩子

head

:阅读更多{to="/docs/migration/meta"}

key

现在你可以在definePageMeta编译器宏中定义key。

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

layout

:阅读更多{to="/docs/migration/pages-and-layouts"}

loading

此特性在Nuxt 3中尚未支持。

middleware

:阅读更多{to="/docs/migration/plugins-and-middleware"}

scrollToTop

此特性在Nuxt 3中尚未支持。如果你想覆盖vue-router的默认滚动行为，可以在~/router.options.ts中配置（参见文档）。与key类似，在definePageMeta编译器宏中指定它。

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

transition

:阅读更多{to="/docs/getting-started/transitions"}

validate

Nuxt 3中的validate钩子只接受一个参数route。与Nuxt 2一样，你可以返回一个布尔值。如果返回false且找不到其他匹配项，这将导致404。你也可以直接返回带有statusCode/statusMessage的对象来立即响应错误（不会检查其他匹配项）。

- <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不支持此功能。相反，你可以直接使用watcher来触发数据重新获取。

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