在vue模板中直接调用返回promise的函数会显示[object promise]，因模板渲染同步且不支持自动await；正确做法是分离获取与展示逻辑，使用ref/reactive存储数据、suspense统一处理异步入口，或手动管理loading/data/error三态。
模板里直接插值调用返回 Promise 的函数，会显示 [object Promise]，这不是 bug，而是 JavaScript 语言行为：Promise 对象默认转字符串就是这个结果。根本问题在于——Vue 模板渲染是同步的，它不会、也不能自动 await 一个 Promise。
别在模板里调用异步函数
这是最常见也最容易踩的坑。比如写成这样：
{{ fetchData() }} 或 {{ getUser(id) }}
只要函数内部用了 async、await 或返回了 Promise（如 axios 请求），模板就只能拿到未解析的 Promise 实例，最终显示为 [object Promise]。
正确做法是把“获取数据”和“展示数据”彻底分开：
- 用
ref或reactive定义响应式状态变量（如user = ref(null)） - 在
setup或生命周期钩子中调用异步函数，拿到真实数据后赋值给响应式变量 - 模板中只读取这个已解析的变量：
{{ user?.name }}
用 Suspense 统一管理异步入口
当整个组件依赖远程数据时，<suspense></suspense> 是 Vue3 提供的官方方案。它让父组件能优雅等待子组件准备就绪。
使用方式很简单：
- 把异步逻辑封装进一个子组件（比如
UserDetail.vue），并在其setup中直接await请求 - 父组件用
<suspense></suspense>包裹该子组件，并提供#fallback插槽（如加载骨架屏） - 无需手动管理 loading 状态，Vue 内部自动协调挂起与恢复
注意：子组件的 setup 函数本身可以是 async，这是 Vue3 明确支持的。
手动控制状态机：loading / data / error
对精细控制有要求的场景（比如要区分“加载中”“空数据”“请求失败”），推荐显式定义三态：
