在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> 是 Vue3 提供的官方方案。它让父组件能优雅等待子组件准备就绪。
使用方式很简单：
- 把异步逻辑封装进一个子组件（比如
UserDetail.vue），并在其setup中直接await请求 - 父组件用
<Suspense>包裹该子组件，并提供#fallback插槽（如加载骨架屏） - 无需手动管理 loading 状态，Vue 内部自动协调挂起与恢复
注意：子组件的 setup 函数本身可以是 async，这是 Vue3 明确支持的。
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
手动控制状态机：loading / data / error
对精细控制有要求的场景（比如要区分“加载中”“空数据”“请求失败”），推荐显式定义三态：
loading: ref(false)data: ref(null)error: ref(null)
在异步函数中按需更新：
loading.value = truedata.value = await api.getData()loading.value = false
模板中配合 v-if 分支渲染：
<div v-if="loading">加载中...</div><div v-else-if="error">{{ error.message }}</div><div v-else>{{ data.title }}</div>
避免响应性丢失：确保数据可被追踪
如果异步返回的是普通对象（非 reactive），直接赋值给 ref 可能导致深层属性不响应。例如：
const result = ref({})result.value = await api.getProfile() —— 这样没问题，因为 ref 包裹后仍是响应式
但若你用 Object.assign(result.value, response) 或循环赋值，且 response 是深嵌套结构，部分属性可能失活。
稳妥做法：
- 用
result.value = response整体替换（推荐） - 或用
reactive(response)+toRefs拆解 - 避免对响应式对象做“非响应式赋值”，比如
result.value.items.push(...)要改用result.value.items = [...result.value.items, ...newItems]
