Nuxt3内置的useFetch组合式函数让我们在服务端和客户端都能方便地请求数据，但在实际使用中，不少人发现它有时拿不到数据、数据不更新或者出现重复请求。理解它的运行机制才能对症下药。
常见拿不到数据的原因
参数不是响应式的
如果把一个普通变量直接传给useFetch的URL或查询参数，当变量变化后请求并不会重新发送，页面也就看不到新数据。
默认缓存与key冲突
useFetch默认会根据URL和参数生成key并缓存结果。在客户端路由切换时，如果key相同，会直接复用缓存，导致看似没发请求也没拿到新数据。
服务端异步未等待
在setup中若未正确await，服务端渲染阶段可能没拿到数据就完成了HTML输出，客户端又因水合逻辑跳过请求。
对应的解决方案
用computed包裹参数
需要确保传给useFetch的值是响应式的，这样依赖变化时会自动重新拉取。
const page = ref(1)
const { data } = await useFetch('/api/list', {
query: computed(() => ({ page: page.value }))
})
手动设置唯一key
在客户端导航场景，通过key强制区分不同请求，避免缓存误用。
const userId = ref('1001')
const { data } = await useFetch(() => `/api/user/${userId.value}`, {
key: computed(() => `user-${userId.value}`)
})
监听并刷新
使用watch配合execute可以精确控制何时重新获取数据。
const { data, execute } = useFetch('/api/info', { immediate: false })
watch(userId, () => execute())
处理错误状态
通过error判断请求是否失败，避免页面空白误以为没数据。
const { data, error } = await useFetch('/api/test')
if (error.value) {
console.log('请求出错', error.value)
}
小结
useFetch拿不到数据大多不是bug，而是用法与默认行为不匹配。保持参数响应式、合理设置key、必要时手动触发，就能稳定完成Nuxt3中的数据访问。