在Vue计算属性中转换Promise是否合理？

为什么会触发lint警告？ #

你遇到的vue/no-async-in-computed-properties规则警告，本质是因为Vue的计算属性设计初衷是同步、纯函数式的状态推导：它依赖的响应式变量变更后，应该立即返回同步计算的结果，而异步操作（比如Promise的then）会让计算属性返回一个Promise对象，而非最终的处理后数据，这偏离了计算属性“同步推导状态”的设计预期。

当前写法的合理性分析 #

从功能实现上看，你的代码完全可行：通过同步读取响应式属性（比如order.value）让计算属性正确追踪依赖，当items$或order变化时，会重新生成处理后的Promise，子组件也能正常接收并处理状态。

但从Vue的设计理念角度，这种用法属于偏离计算属性的定位——计算属性应该用来处理同步的状态转换，而非异步流的转换。虽然功能正常，但不符合框架的惯用模式，这也是lint规则要提醒你的原因。

可选的解决方案 #

方案1：保留当前写法，禁用lint警告 #

如果你确认这个场景是合理的，且团队认可这种写法，可以在计算属性上添加注释临时禁用该规则：

const sortedItems$ = computed(() => {
  // eslint-disable-next-line vue/no-async-in-computed-properties
  const justForTracking = order.value;
  return items.value.then(i => [...i].sort(justForTracking))
});

方案2：改用watch+Ref实现（更符合Vue设计模式） #

如果想规避lint警告，同时贴合Vue对异步状态的处理习惯，推荐使用watch监听依赖，手动更新处理后的Promise：

const items$ = ref<Promise<any[]>>(Promise.resolve([]));
const order = ref('ASC');
const sortedItems$ = ref<Promise<any[]>>(Promise.resolve([]));

// 监听依赖变化，更新处理后的Promise
watch([items$, order], async ([newItemsPromise, newOrder]) => {
  try {
    // 等待原Promise完成
    const rawItems = await newItemsPromise;
    // 处理数据后生成新Promise
    sortedItems$.value = Promise.resolve(
      [...rawItems].sort((a, b) => {
        return newOrder === 'ASC' ? a - b : b - a;
      })
    );
  } catch (error) {
    // 传递错误状态到子组件
    sortedItems$.value = Promise.reject(error);
  }
}, { immediate: true }); // 初始执行一次，确保初始状态正确

这种写法更清晰，错误处理也更直观，完全符合Vue的异步状态处理规范，不会触发lint警告。

总结 #

两种方案都能满足你的需求：

• 如果追求代码简洁，且团队接受这种“非常规”用法，可以选择方案1；
• 如果希望贴合Vue的设计模式，代码更具可维护性，方案2是更稳妥的选择。

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