Nuxt3+VueUse：输入≥3字符防抖100ms触发useFetch及值为空问题

核心问题分析 #

你的代码存在两个关键错误，导致请求时searchTerm.value始终为空：

1. query参数非响应式：useFetch的query配置直接写query: searchTerm.value时，只会在组件初始化时读取一次空值，后续searchTerm更新不会同步到请求参数里。
2. watch选项用法错误：useFetch的watch应该传入要监听的响应式变量，而非直接传入防抖函数。

修复方案 #

以下是两种符合需求的修复方式，实现「输入≥3字符+100ms防抖触发请求」的逻辑：

方式一：函数式query+监听searchTerm并防抖

<script setup>
import { ref, watch } from 'vue'
import { useFetch, useDebounceFn } from '@vueuse/core'

const searchTerm = ref('')

// 防抖处理请求触发逻辑，延迟100ms
const debouncedExecute = useDebounceFn(() => {
  if (searchTerm.value.length >= 3) {
    execute()
  }
}, 100)

// 监听searchTerm变化，触发防抖函数
watch(searchTerm, debouncedExecute)

const { data, execute } = useFetch('url', {
  headers: {
    access_token: 'token'
  },
  // 用函数返回query，每次请求时都会取最新的searchTerm.value
  query: () => ({
    query: searchTerm.value
  }),
  immediate: false,
})
</script>

<template>
  <input v-model="searchTerm" placeholder="输入至少3个字符搜索" />
</template>

方式二：useDebounce处理searchTerm，监听防抖后变量

这种方式更简洁，直接对searchTerm做防抖处理，再基于防抖后的变量触发请求：

<script setup>
import { ref } from 'vue'
import { useFetch, useDebounce } from '@vueuse/core'

const searchTerm = ref('')
// 生成防抖后的响应式变量，延迟100ms
const debouncedSearch = useDebounce(searchTerm, 100)

const { data } = useFetch('url', {
  headers: {
    access_token: 'token'
  },
  query: () => ({
    query: debouncedSearch.value
  }),
  // 监听防抖后的变量，自动触发请求
  watch: [debouncedSearch],
  immediate: false,
  // 过滤长度不足3的请求
  beforeFetch({ options }) {
    if (debouncedSearch.value.length < 3) {
      return { cancel: true }
    }
    return { options }
  }
})
</script>

<template>
  <input v-model="searchTerm" placeholder="输入至少3个字符搜索" />
</template>

关键说明 #

• 采用函数式query是让请求参数获取最新值的核心，每次触发请求时都会执行函数拿到当前最新的searchTerm。
• 防抖逻辑需和响应式变量的监听结合，确保只有输入稳定且满足长度要求时才发起请求。

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