初学NUXT3之为什么useAsyncData请求数据是null

最近在写导航网站顺便学习 nuxt3，

一开始使用 $fetch 直接去请求接口配置了跨域处理之后请求正常。

跨域配置：

  // 跨域处理
  nitro: {
    devProxy: {
      "/api": {
        target: "https://xxx.cn",
        changeOrigin: true,
        // ws: true, // 如果你需要代理WebSockets
        // pathRewrite: { '^/api': '' }, // 可选，重写路径
      },
    },
  },

使用 useAsyncData 请求数据是 null，也没有任何报错信息。

这两个请求都是写在一个方法里面，然后在 onMounted 里面进行调用，

经过一番测试把 useAsyncData 放在 script setup 里面执行就是正常的。

又测试了一下，点击事件再去执行 useAsyncData 效果就和直接使用 $fetch 是一样的。

终于明白了这两个方法的实际区别，而不是像文档所说的那么简单。

// 在 SSR 期间，数据被提取两次，一次在服务器上，一次在客户端上。 const dataTwice = await $fetch('/api/item')

// 在 SSR 期间，数据仅在服务器端获取并传输到客户端。 const { data } = await useAsyncData('item', () => $fetch('/api/item'))

// 您还可以使用 Fetch 作为 useAsyncData + $fetch 的快捷方式 const { data } = await useFetch('/api/item')