元素
元素
工具
博客
问答

Vue 3 中 Suspense 不生效是怎么回事？

钰莹 阅读 2
框架

我在用 Vue 3 的 Suspense 包裹一个异步组件，但页面一直显示默认内容，fallback 根本没触发。明明组件里用了 await 获取数据，也返回了 Promise，但 Suspense 好像完全没起作用。

我试过把 setup() 改成 async，也确认了子组件是通过 defineAsyncComponent 引入的，但还是不行。是不是哪里写错了？

<template>
  <Suspense>
    <template #default>
      <AsyncUserProfile />
    </template>
    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>
Vue3组件开发
我来解答 赞 0 收藏
二维码
手机扫码查看
反馈
1 条解答
UX增芳
UX增芳 Lv1
大概率是你在组件里把异步请求写在了生命周期钩子里，比如 onMounted。Suspense 只认 setup 函数本身返回的 Promise，如果你在 onMounted 里搞异步，setup 执行完就结束了，Suspense 以为没事了直接就把默认内容渲染出来了。

解决办法很简单，把异步逻辑直接提到 setup 顶层去 await。

如果你是 Options API，子组件得这么写：

export default {

  async setup() {

    // 必须直接在这里 await，别包在 onMounted 或函数里

    const res = await fetch('/api/user');

    const data = await res.json();



    return { data };

  }

}


如果你是
相关推荐
元素
元素
工具
博客
问答
登录/注册