.【vue3+ts】A component with async setup() must be nested in a ＜Suspense＞ in order to be rendered.

最新推荐文章于 2024-07-13 15:28:27 发布
最新推荐文章于 2024-07-13 15:28:27 发布
阅读量3.3k 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/getElementme/article/details/132413359
文章讨论了在Vue3中，如果组件setup函数返回Promise，需在<Suspense>边界内渲染。这是一种实验性特性，非生产环境下使用，解决方法是移除await。警告提示只需确保setup函数不返回Promise即可。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近遇到遇到了个不大不小的警告，

 这段话的大致意思是：你在组件的setup函数中返回了一个Promise，但是在父组件树中没有找到<Suspense>边界。在Vue 3中，如果一个组件的setup函数是异步的（返回一个Promise），那么它必须嵌套在一个<Suspense>中才能被渲染。

所以你需要vue3提供的新特性，使用<Suspense>异步组件，这个vue3提供的为异步组件实现的一个加载方法；

但是呢，

这个是一个实验特性！就是不要上生产，保不齐你上生产就改了，所以这个警告很简单，只要子组件setup函数里面不要返回Promise就可以了。没错就像这样，

 

所以啊，把await去掉就可以了

麦秋拾伍
关注
Vue3 - 解决打包报错SyntaxError:At least one ＜template＞ or ＜script＞ is required in a single file component.
王二红
09-10 7730
vue3，报错，打包，build，提示错误，vite，vue3打包，vue报错，errorduringbuild:SyntaxError:Atleastone＜template＞or＜script＞isrequiredinasinglefilecomponent.，详细解决方案，如何快速定位空文件，项目中存在空的文件导致的，都检查了没问题，找不到空白文件，如何找到缺少template的vue文件，不显示错误文件怎么排查，不知道报错的地方在哪，vue3启动报错，如何解决这个问题
Vue3 - 解决报错警告 ＜router-view＞ can no longer be used directly inside ＜transition＞ or ＜keep-alive＞.Use s
最新发布
王二红
07-30 2823
vue3，警告，报错，vite，router，路由，router-view，销毁，transition，过渡动画，keep-alive，缓存，问题，在vue3项目中，浏览器控制台警告，
【Vue3】之异步组件Suspense和defineAsyncComponent结合的使用方法总结
weixin_43343144的博客
10-11 1214
3.Suspense 等待异步组件时渲染一些额外内容，让应用有更好的用户体验 使用步骤： 异步引入组件 import {defineAsyncComponent} from 'vue' const Child = defineAsyncComponent(()=>import('./components/Child.vue')) 使用Suspense包裹组件，并配置好default 与 fallback <template> &
问题记录：A component with async setup()must be nested in a in order to be rendered.
m0_67987829的博客
01-07 8047
suspense嵌套解决setup function returned a promise, but no boundary was found in the parent component tree. A component with async setup() must be nested in a in order to be rendered.
vue3报错：A component with async setup()must be nested in a in order to be rendered.
Ana的blog
07-13 213
这一步如果按照提示，在组件中使用Suspense的话，还会出现报错，因为Suspense是试用版。在子组件中删掉vue3的setup，使用之前的vue2语法。vue3的setup语法糖形式使得异步函数调用出现报错。
Vue3 Suspense 组件
lio-zero 的博客
05-05 450
本文已整理到 Github，地址 ???? blog。 如果我的内容帮助到了您，欢迎点个 Star ???????????? 鼓励鼓励 :) ~~ 我希望我的内容可以帮助你。现在我专注于前端领域，但我也将分享我在有限的时间内看到和感受到的东西。 Suspense 组件是 Vue3 新增的内置组件之一。它允许我们的应用程序在等待异步组件的同时渲染一些备用内容，让我们创造一个流畅的用户体验。 什么是 Suspense 组...
记一次误用顶层await导致的路由渲染错误
昆吾kw的博客
04-22 4347
起初按照直觉，以为是路由表配置出了问题，导致路由渲染不出来，反复调试路由配置，始终不奏效。这就导致了一个问题，想使用 await，必须要将其定义在一个 async 函数中，再调用此函数。，它 支持在 async 函数以外使用 await，但是只能在一个模块的顶层中使用。之所以被渲染成注释节点，看似是路由组件没有正确渲染，也有可能是组件本身出了问题。这自然不是在模块顶层中使用了，也就导致了在解析上出现问题，导致组件不能正确渲染，最终导致对应的路由视图没有渲染出来。起初由于空页面，空节点，误解是路由的问题。
vue3的setup的使用和原理解析
热门推荐
weixin_42974827的博客
09-24 2万+
在vue3中，新的setup函数属性给我们提供了书写的便利，其背后的工作量无疑是巨大的，有状态的组件的初始化的过程，在 setup 函数初始化部分我们讨论的源码的执行过程。
vue3 + ts ＜script setup＞语法糖
Web_Notes的博客
03-09 2882
setUp
[Vue warn]: ＜Suspense＞ slots expect a single root node.
qq_45770253的博客
11-04 3214
这个报错是 vue3 前段之间新添加的，就是如果在 Suspense 标签中插入多个组件的话，需要给这多个组件包裹一个根标签，如下的形式： <Suspense> <template #default> <div> <async-show /> <dog-show /> </div> </template> <template #fallback> &lt
vue3+vite在main.ts或者main.js文件中引入/App.vue报错（/App.vue不是模块）
XSL_HR的博客
12-26 1万+
vue3+vite在main.ts或者main.js文件中引入/App.vue报错（/App.vue不是模块）
Vue源码学习(三)——mountComponent
m0_74793405的博客
12-16 684
上一篇说到的主要核心就是这三个函数的调用，这篇就分别探讨一下这三个函数的使用create。
Vue3学习笔记3 生命周期、异步组件、代码分包、Suspense、依赖注入、Mitt、v-model、自定义指令directive
AIpoem的博客
01-24 3220
1. 生命周期 2. 异步组件-代码分包-suspense 3. Teleport传送组件 4. 依赖注入Provide / Inject 5. Mitt库的使用 6. v-model和.sync修饰符 7. 自定义指令
Vue笔记-4-Vue3.0
の博客
03-27 212
vue笔记-4，vue3.0
通过一个函数来解析promise，返回promise——仅限在异步组件Suspense的子组件中使用；当前组件中使用不了这个数据；
阿牛哥的博客
10-15 469
通过一个函数来解析promise，返回promise——仅限在异步组件Suspense的子组件中使用；当前组件中使用不了这个数据；
vue3中suspense使用
KingIQueen的博客
10-31 424
<Suspanse> <template #default> // 自定义组件 <async></async> </template> <template #fallback> <h1>Loading !...</h1> </template> </Suspense> 自定义异步子组件 ...
vue3-setup函数使用注意事项
qq_58946831的博客
11-26 1437
setup函数返回两种值 1、 若返回一个对象，则对象中的属性、方法，在模板中可以直接使用。（重点关注！常用） export default { name: 'App', setup() { let name = "罗根"; let age = 18; function showName() { alert(`姓名：${name} 年龄：${age}`) } // 返回一个对象（常用） return { name,
【Vue3 第二十章】异步组件 & 代码分包 & Suspense内置组件 & 顶层 await
前端知识分享喵
02-25 1381
在大型项目中，我们可能需要拆分应用为更小的块，以减少主包的体积，并仅在需要时再从服务器加载相关组件。这时候就可以使用异步组件。Vue 提供了方法来实现此功能，这个方法接收一个返回 Promise 的加载函数。ES 模块动态导入会返回一个 Promise，所以多数情况下我们会将它和搭配使用。类似 Vite 和 Webpack 这样的构建工具也支持此语法 (并且会将它们作为打包时的代码分割点)，因此我们也可以用它来导入 Vue 单文件组件。
vue3踩坑之-Suspense
chendf__的博客
04-09 1万+
vue3 Suspense vue3新增了异步组件，和一堆api。。文档 最近使用vue3开发中，需要在setup中使用async获取接口数据 // ... async setup () { await $http.getUserInfo().then((res: any) => { //... 处理数据 }) await $http.getApplicationInfo().then((res: any) => {// ...}) return { //.... } } 运
大地老师深度解析：Vue3.x+Ts+Vuex+Antd全栈实战教程
本篇教程是针对Vue3.x技术栈的全面学习指南，由经验丰富的讲师大地老师精心录制，适合初学者和进阶开发者。课程始于2020年11月，内容涵盖了Vue3.x的核心技术与常用框架集成，确保了教学的专业性和实用性。 1. **...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值