Vue3中computed因未使用props变更触发不必要请求的优化方案

1. 核心思路：严格隔离请求触发的依赖 #

问题本质是useFetch意外响应了pos的变化，我们需要让请求仅受begin和end的影响，完全排除pos的干扰。以下是两种优雅的实现方式：

方案A：手动监听指定props触发请求 #

放弃自动依赖追踪，主动监听begin和end的变化，仅在这两个值变更时发起请求，彻底避免pos的影响：

const props = defineProps<{
    begin: number,
    end: number,
    pos: number,
}>()

const data = ref(null)
const error = ref(null)
const isLoading = ref(false)

// 仅监听begin和end的变化，初始化时立即执行一次请求
watch([() => props.begin, () => props.end], async ([newBegin, newEnd]) => {
  isLoading.value = true
  try {
    const response = await fetch(`...&begin=${newBegin}&end=${newEnd}`)
    data.value = await response.json()
  } catch (err) {
    error.value = err
  } finally {
    isLoading.value = false
  }
}, { immediate: true })

方案B：优化VueUse useFetch的依赖范围 #

如果坚持使用VueUse的useFetch，可以通过封装独立的计算属性，明确指定请求的依赖源：

const props = defineProps<{
    begin: number,
    end: number,
    pos: number,
}>()

// 创建仅依赖begin和end的计算属性，隔离pos的影响
const fetchParams = computed(() => ({
  begin: props.begin,
  end: props.end
}))

const { data, error, isLoading } = useFetch(() => {
  const { begin, end } = fetchParams.value
  return `...&begin=${begin}&end=${end}`
}, {
  // 明确监听fetchParams，而非自动追踪所有响应式变量
  watch: [fetchParams]
}).json()

2. 进阶优化：避免重复请求 #

如果begin/end存在频繁重复赋值的场景，可以在监听逻辑中添加值对比，仅当值真正变化时才发起请求：

watch([() => props.begin, () => props.end], async ([newBegin, newEnd], [oldBegin, oldEnd]) => {
  if (newBegin !== oldBegin || newEnd !== oldEnd) {
    // 发起请求逻辑
  }
}, { immediate: true })

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