Vue中computedAsync响应式异常：storeData卡在-1，localData正常更新求助

问题描述 #

在Vue SFC中遇到响应式异常：localData经computed包装后能正常更新，但storeData始终停留在初始值-1。具体现象：

• 直接在模板中使用localData和storeData，两者均能正常更新；
• 通过computed二次包装后（computedLocalData与computedStoreData），仅computedLocalData可更新；
• 若同时在模板中使用storeData和computedStoreData，两者又都能正常更新；
• 添加空监听（watch(storeData, () => {})）后，computedStoreData也能正常更新。

完整代码如下：

<template>
  <h2>Test data from local: {{ computedLocalData }}</h2>
  <h2>Test data from store: {{ computedStoreData }}</h2>
</template>

<script lang="ts" setup>
import {computedAsync} from "@vueuse/core";
import {computed,  reactive, ref, type Ref, unref} from "vue";

const storeData = getTestData(3);
const computedStoreData = computed(() => storeData.value)

const localData = ref(-1);
const computedLocalData = computed(() => localData.value)

setTimeout(() => localData.value = 3, 2000)

// Store

const _testDatas = reactive<Record<number,  Ref<number>>>();

function timeout(ms : number) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function getTestData(venueId : number) {
  return computed(() => {
    if (! (venueId in _testDatas)) {
      _testDatas[venueId] = computedAsync(async () => {
        await timeout(3000);
        return venueId
      }, -1, {lazy: false});
    }
    return unref(_testDatas[venueId]);
  })
}

</script>

补充场景需求：需从服务器获取动态场地集合，每个场地对应专属服务集合，要求每个场地的服务请求在SPA中最多执行一次，且仅在需要时触发。

分析与解决方案 #

问题根源 #

storeData本身是一个computed，其内部逻辑为：第一次执行时才创建computedAsync并添加到_testDatas中。Vue的响应式依赖收集在computed首次执行时完成，此时_testDatas[venueId]尚未存在，导致storeData未追踪到后续computedAsync更新的依赖。当computedAsync完成异步操作更新值时，storeData不会被触发重新计算，进而computedStoreData无法感知变化。

而直接在模板中使用storeData或添加空监听时，会强制Vue持续追踪storeData的依赖变化，从而捕获到computedAsync的更新。

修复方案 #

方案1：移除多余的computed包装

storeData本身已是computed，无需二次包装，直接在模板中使用storeData.value即可：

<template>
  <h2>Test data from local: {{ computedLocalData }}</h2>
  <h2>Test data from store: {{ storeData.value }}</h2>
</template>

方案2：调整getTestData实现，明确依赖

将_testDatas的访问提到computed顶层，确保依赖被正确收集：

function getTestData(venueId : number) {
  return computed(() => {
    // 提前访问_testDatas，确保响应式依赖被追踪
    const datas = _testDatas;
    if (! (venueId in datas)) {
      datas[venueId] = computedAsync(async () => {
        await timeout(3000);
        return venueId
      }, -1, {lazy: false});
    }
    return unref(datas[venueId]);
  })
}

针对实际场景的稳健方案 #

对于“缓存场地服务请求，仅按需执行一次”的需求，推荐用ref存储请求状态（加载中、数据、错误），替代嵌套computed的方式，逻辑更清晰且响应式更可靠：

import { reactive, ref } from "vue";

// 存储每个场地的服务请求状态
const _venueServices = reactive<Record<number, Ref<{
  loading: boolean;
  data?: any;
  error?: any;
}>>>({});

// 模拟API请求
async function fetchServices(venueId: number) {
  await new Promise(resolve => setTimeout(resolve, 3000));
  return { id: venueId, services: ["服务A", "服务B", "服务C"] };
}

function getVenueServices(venueId: number) {
  if (!_venueServices[venueId]) {
    const state = ref({
      loading: true,
      data: undefined,
      error: undefined
    });
    _venueServices[venueId] = state;

    // 执行请求并更新状态
    fetchServices(venueId)
      .then(data => state.value.data = data)
      .catch(err => state.value.error = err)
      .finally(() => state.value.loading = false);
  }
  return _venueServices[venueId];
}

组件中使用示例：

<template>
  <div v-if="venueServices.loading">加载中...</div>
  <div v-else-if="venueServices.error">请求失败：{{ venueServices.error }}</div>
  <div v-else>
    <h3>场地{{ venueServices.data.id }}的服务</h3>
    <ul>
      <li v-for="service in venueServices.data.services" :key="service">{{ service }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
const venueServices = getVenueServices(3);
</script>

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