前言

在使用 Vue 3 的组合式 API (Composition API) 时，我们经常依赖 computed 来创建响应式的派生状态。但许多开发者，包括我自己，都曾尝试在 computed 中执行异步操作，结果却不尽人意。这篇文章将探讨为什么这不可行，并提供一个更优雅、更符合 Vue 设计理念的解决方案。

为什么 computed 不支持异步？

首先，我们需要理解 computed 的核心设计：它应该是同步的。Vue 需要在依赖项变更时，能够立即、同步地计算出新值，以便更新视图。如果你在 computed 中返回一个 Promise，那么它的值实际上就是那个 Promise 对象本身，而不是你期望的异步操作结果。这会导致模板渲染出 [object Promise] 而不是最终数据。

错误的尝试：

import { computed } from 'vue';

const myAsyncData = computed(async () => {
  const response = await fetch('https://api.example.com/data');
  return await response.json();
});

// 在模板中使用 {{ myAsyncData }} 会显示一个 Promise 对象，而不是数据。

正确的姿势：ref 与 watch 的组合

解决这个问题的正确方法是分离“状态”和“触发异步操作的逻辑”。我们应该使用 ref 来存储最终的数据，并使用 watch 或 watchEffect 来监听依赖项的变化，从而触发异步请求。

推荐方案：

假设我们需要根据一个响应式的 userId 来异步获取用户信息。

1. 定义状态和依赖：使用 ref 来存储用户信息和 userId。

   import { ref, watch } from 'vue';
   
   const userId = ref(1);
   const userInfo = ref(null);
   

2. 使用 watch 监听变化并执行异步操作：当 userId 变化时，watch 回调函数会执行，我们在这里发起异步请求，并在请求成功后更新 userInfo 的值。

   const fetchUserInfo = async (id) => {
     userInfo.value = null; // 在请求开始前，可以先重置状态
     try {
       const response = await fetch(`https://api.example.com/users/${id}`);
       if (!response.ok) throw new Error('Network response was not ok');
       userInfo.value = await response.json();
     } catch (error) {
       console.error("Failed to fetch user info:", error);
       // 这里可以设置一个错误状态
     }
   };
   
   watch(userId, (newId) => {
     fetchUserInfo(newId);
   }, { immediate: true }); // 设置 immediate: true 可以在组件初始化时立即执行一次
   
   // 之后，你可以改变 userId 的值来触发数据重新获取
   // setTimeout(() => userId.value = 2, 2000);
   

通过这种方式，userInfo 就是一个标准的响应式 ref，你可以在模板或其它 computed 属性中安全地、同步地使用它，而所有的异步逻辑都被清晰地封装在了 watch 回调中。

结论

请记住这个最佳实践：computed 用于同步派生，watch 用于响应变化并执行副作用（如异步请求）。遵循这个原则，你的 Vue 3 代码会变得更加清晰、健壮和易于维护。