Nuxt3 useFetch触发PATCH请求异常问题咨询

我对Nuxt的数据获取方式及响应式机制不太理解。页面通过useFetch从API获取数据，输入框直接修改该响应式数据，且通过@blur触发PATCH接口更新值。但使用useFetch时每输入一个字符就会调用PATCH接口，而使用useAsyncData配合$fetch则无此问题，二者难道不是等效的吗？请解释为何useFetch会在每一次输入时触发PATCH请求（而非失焦时），而useAsyncData可正常工作。

代码示例：

<script setup lang="ts">
const { data } = await useFetch<Project>(`/api/projects/${route.params.id}`);

// const { execute: update } = await useAsyncData(async () => {
//   await $fetch<Project>(`/api/projects/${route.params.id}`, {
//     method: "PATCH",
//     body: data.value,
//   });
// });
const { execute: update } = await useFetch(`/api/projects/${route.params.id}`, {
  method: "PATCH",
  body: data.value,
});
</script>

<template>
  <div v-if="data" class="flex items-stretch px-6 py-4 h-[calc(100vh_-_66px)]">
    <textarea
      v-if="data.notes"
      v-model="data.notes"
      rows="5"
      class="textarea textarea-primary w-full resize-none"
      placeholder="Enter your notes"
      @blur="update()"
    ></textarea>
  </div>
</template>

1. useFetch的自动追踪特性 #

useFetch是Nuxt封装的上层工具，它默认会自动监听请求参数（包括body）中的响应式依赖。当你在body中传入data.value（这是一个响应式对象），输入框修改data.notes时，data对象的响应式状态发生变化，useFetch会把这个变化识别为请求参数的更新，自动重新执行PATCH请求——这就是输入每个字符都触发请求的原因。

2. useAsyncData的默认行为 #

useAsyncData是更底层的API，它默认不会自动追踪回调内部的响应式依赖。你的useAsyncData代码中，回调函数仅在手动调用execute时才会读取data.value的值，没有设置watch选项来监听data的变化，所以只有在输入框失焦触发update()时，才会执行PATCH请求，符合预期。

3. 修复useFetch的方案 #

如果要让useFetch和useAsyncData表现一致，只需要关闭它的自动监听特性，添加watch: false选项：

const { execute: update } = await useFetch(`/api/projects/${route.params.id}`, {
  method: "PATCH",
  body: data.value,
  watch: false // 关闭自动依赖追踪
});

这样useFetch就不会因为data的变化自动触发请求，只有调用update()时才会执行PATCH。

内容的提问来源于stack exchange，提问作者Žan Fras