Vue3多组件实例绑定与刷新异常问题求助

核心问题分析 #

• v-for的key复用问题：父组件里用索引ix作为v-for的key，当列表顺序调整时，Vue会复用现有组件实例而非创建新实例，导致子组件的状态（包括useLazyFetch缓存、内部ref值）被复用，引发数据显示异常。
• useLazyFetch缓存冲突：Nuxt的useLazyFetch默认按请求URL生成缓存key，子组件里的uniqueId在setup初始化时生成，组件复用时不会重新生成，加上URL动态参数未正确触发缓存更新，导致多个组件共用同一份缓存，只有第一个请求生效。
• refresh未强制跳过缓存：refresh方法默认优先使用缓存，不强制设置的话不会触发新的网络请求。

分步解决方案 #

1. 修复父组件v-for的key #

把v-for的key从索引改为每个filter的唯一标识（比如filter.endpoint），确保每个子组件实例独立，避免复用：

<!-- 父组件模板修改 -->
<div v-for="(filter, ix) in listFilters" :key="filter.endpoint"> 
  <ListFilter :id="ix" :filter-type="filter.type" :filter-endpoint="filter.endpoint" :endpoint="props.endpoint" @trigger-filter-change="handleChildFilter" @filter-change="onChildFilterChange"/>
</div>

2. 调整useLazyFetch缓存策略 #

修改子组件的useLazyFetch配置，要么关闭缓存，要么基于组件props设置唯一缓存key：

// 子组件中useLazyFetch修改
const {data, error, pending, refresh } = useLazyFetch(() => {
  return `${props.endpoint}/${props.filterEndpoint}?${props.appliedFilters ?? ''}${urlQueryString.value}`
}, { 
  baseURL: runtimeConfig.public.baseURL,
  headers:{'Allow-Control-Allow-Origin': '*'},
  // 方案1：直接关闭全局缓存
  cache: false,
  // 方案2：设置唯一缓存key，避免不同组件共用缓存
  key: `list-filter-${props.filterEndpoint}-${props.filterType}`
})

可以移除手动添加的&id=${uniqueId}，通过key配置已经能保证缓存唯一性。

3. 强制refresh触发新请求 #

在onMounted中调用refresh时，添加force: true参数，跳过缓存强制发起新请求：

onMounted(async () => {    
  console.log("On Mounted")
  console.log(props.filterEndpoint)
  // 强制刷新，忽略缓存
  await refresh({ force: true })
  emit('triggerFilterChange', { type: props.filterType, fn: triggerFilterChange} )
})

4. 自动监听参数变化触发请求 #

如果urlQueryString或props.appliedFilters变化需要重新请求，把这些参数加入useLazyFetch的watch配置：

const {data, error, pending, refresh } = useLazyFetch(() => {
  return `${props.endpoint}/${props.filterEndpoint}?${props.appliedFilters ?? ''}${urlQueryString.value}`
}, { 
  baseURL: runtimeConfig.public.baseURL,
  headers:{'Allow-Control-Allow-Origin': '*'},
  key: `list-filter-${props.filterEndpoint}-${props.filterType}`,
  // 监听参数变化，自动触发新请求
  watch: [urlQueryString, () => props.appliedFilters]
})

额外优化 #

• 子组件中的uniqueId可以直接移除，缓存唯一性已经由key配置保证。
• 给子组件的form标签添加@submit.prevent，阻止默认页面刷新行为，避免筛选时的页面跳转。

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