Nuxt3中useFetch返回的data仅模板可用，脚本中未定义？

这是预期行为，原因和解决方法如下：

核心原因 #

useFetch 返回的 data 是一个响应式的 Ref 对象，而非直接的原始数据：

• 在模板中，Vue 会自动对 Ref 对象进行「解包」，所以你可以直接写 {{ data.entries }} 访问到实际数据；
• 但在 <script setup> 里，必须通过 .value 属性才能获取 Ref 内部的真实值。你直接写 data.entries，相当于在访问 Ref 对象本身的 entries 属性（而非内部数据的 entries），自然会得到 undefined。

正确用法 #

有两种常见的正确处理方式：

方式1：直接通过 .value 访问并赋值 #

<script setup>
const { data } = await useFetch('/api/entries');
// 用 .value 获取真实数据，加可选链避免请求失败时报错
const entries = data.value?.entries;
console.log(entries);
</script>

<template>
  {{ data.entries }}
  {{ entries }} <!-- 现在可以正常显示 -->
</template>

方式2：使用 computed 保持响应式（推荐） #

如果后续数据可能更新，用 computed 包装能保持 entries 的响应式：

<script setup>
const { data } = await useFetch('/api/entries');
const entries = computed(() => data.value?.entries ?? []);
console.log(entries.value);
</script>

<template>
  {{ data.entries }}
  {{ entries }} <!-- 无需加 .value，模板自动解包 -->
</template>

额外说明 #

你后端的 server/[...].js 逻辑没问题，这个问题只和前端对 Ref 对象的处理有关，和数据来源无关。

内容的提问来源于stack exchange，提问作者tpei