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

最新推荐文章于 2024-07-23 21:45:00 发布
最新推荐文章于 2024-07-23 21:45:00 发布
阅读量1.4k 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/getElementme/article/details/132413359
版权

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

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

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

但是呢，

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

 

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

麦秋拾伍
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3 Suspense 组件
lio-zero 的博客
05-05 357
本文已整理到 Github，地址 ???? blog。 如果我的内容帮助到了您，欢迎点个 Star ???????????? 鼓励鼓励 :) ~~ 我希望我的内容可以帮助你。现在我专注于前端领域，但我也将分享我在有限的时间内看到和感受到的东西。 Suspense 组件是 Vue3 新增的内置组件之一。它允许我们的应用程序在等待异步组件的同时渲染一些备用内容，让我们创造一个流畅的用户体验。 什么是 Suspense 组...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
问题记录：A component with async setup()must be nested in a in order to be rendered.
m0_67987829的博客
01-07 6639
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学习笔记3 生命周期、异步组件、代码分包、Suspense、依赖注入、Mitt、v-model、自定义指令directive
AIpoem的博客
01-24 2968
1. 生命周期 2. 异步组件-代码分包-suspense 3. Teleport传送组件 4. 依赖注入Provide / Inject 5. Mitt库的使用 6. v-model和.sync修饰符 7. 自定义指令
uniapp + vue3开发中组合式函数必须是一个同步函数
SilenceJude的博客
04-24 4536
vue3中的组合式函数使用时，导出的组合式函数必须是一个同步函数。
记一次误用顶层await导致的路由渲染错误
昆吾kw的博客
04-22 3107
起初按照直觉，以为是路由表配置出了问题，导致路由渲染不出来，反复调试路由配置，始终不奏效。这就导致了一个问题，想使用 await，必须要将其定义在一个 async 函数中，再调用此函数。，它 支持在 async 函数以外使用 await，但是只能在一个模块的顶层中使用。之所以被渲染成注释节点，看似是路由组件没有正确渲染，也有可能是组件本身出了问题。这自然不是在模块顶层中使用了，也就导致了在解析上出现问题，导致组件不能正确渲染，最终导致对应的路由视图没有渲染出来。起初由于空页面，空节点，误解是路由的问题。
vue3的setup的使用和原理解析
热门推荐
weixin_42974827的博客
09-24 2万+
在vue3中，新的setup函数属性给我们提供了书写的便利，其背后的工作量无疑是巨大的，有状态的组件的初始化的过程，在 setup 函数初始化部分我们讨论的源码的执行过程。
Vue源码学习(三)——mountComponent
m0_74793405的博客
12-16 378
上一篇说到的主要核心就是这三个函数的调用，这篇就分别探讨一下这三个函数的使用create。
VUE3-初识setup（2）
述安的博客
02-25 514
<template> <h1>一个人的信息</h1> <h2>姓名：{{ name }}</h2> <h2>年龄：{{ age }}</h2> <h2>性别：{{ sex }}</h2> <button @click="sayHello">说话(Vue3所配置的——sayHello)</button> <br> <br>
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
Vue3.x 是 Vue.js 框架的最新版本，它带来了许多优化和改进，包括更好的性能、更简洁的 API 和Composition API。Vite 是由 Vue.js 作者尤雨溪开发的新型前端构建工具，它利用了 ES 模块的原生导入功能，实现了更快的...
Vue3+Ts+Less 开发的前端UI框架.zip
06-08
Vue3+Ts+Less 开发的前端UI框架.zipVue3+Ts+Less 开发的前端UI框架.zipVue3+Ts+Less 开发的前端UI框架.zipVue3+Ts+Less 开发的前端UI框架.zipVue3+Ts+Less 开发的前端UI框架.zipVue3+Ts+Less 开发的前端UI框架....
vue-基于Vue3+TS开发的音乐播放器.zip
05-04
【Vue3 + TypeScript 音乐播放器开发详解】 在现代前端开发中，Vue.js 已成为最流行的JavaScript框架之一，而Vue3的发布更是引入了许多性能优化和新特性。配合TypeScript，我们可以得到更好的类型检查和更强大的...
vue3+ts实战项目组件工具库.zip
03-03
Vue3+TS实战项目组件工具库是一个以Vue3和TypeScript为核心技术的开发资源，旨在帮助开发者构建高效、可复用且类型安全的前端应用。这个压缩包包含了一个名为"visualization-master"的项目，可能是一个专门用于数据...
vue3源码阅读【runtime-core\src\component.ts】【setupComponent】
qq_38862234的博客
07-22 1454
vue3源码
【Vue3】之异步组件Suspense和defineAsyncComponent结合的使用方法总结
weixin_43343144的博客
10-11 1078
3.Suspense 等待异步组件时渲染一些额外内容，让应用有更好的用户体验 使用步骤： 异步引入组件 import {defineAsyncComponent} from 'vue' const Child = defineAsyncComponent(()=>import('./components/Child.vue')) 使用Suspense包裹组件，并配置好default 与 fallback <template> &
vue3-setup函数使用注意事项
qq_58946831的博客
11-26 1346
setup函数返回两种值 1、 若返回一个对象，则对象中的属性、方法，在模板中可以直接使用。（重点关注！常用） export default { name: 'App', setup() { let name = "罗根"; let age = 18; function showName() { alert(`姓名：${name} 年龄：${age}`) } // 返回一个对象（常用） return { name,
【Vue3 第二十章】异步组件 & 代码分包 & Suspense内置组件 & 顶层 await
前端知识分享喵
02-25 1273
在大型项目中，我们可能需要拆分应用为更小的块，以减少主包的体积，并仅在需要时再从服务器加载相关组件。这时候就可以使用异步组件。Vue 提供了方法来实现此功能，这个方法接收一个返回 Promise 的加载函数。ES 模块动态导入会返回一个 Promise，所以多数情况下我们会将它和搭配使用。类似 Vite 和 Webpack 这样的构建工具也支持此语法 (并且会将它们作为打包时的代码分割点)，因此我们也可以用它来导入 Vue 单文件组件。
【VUE】vue3学习笔记（异步组件，包含defineAsyncComponent、Suspense的使用）
编码世界
09-30 2173
按需引入，用到的时候再加载，异步组件的引入需要用`defineAsyncComponent`进行注册。 `defineAsyncComponent`工厂函数需要返回一个Promise对象，接收对象类型，对异步函数进行设置。
vue3 学习笔记17 -- 基于el-menu封装菜单
最新发布
weixin_46328739的博客
07-23 165
前提条件：组件创建完成。
vue3 Getting a value from the `props` in root scope of `<script setup>` will cause the value to lose reactivity.
11-28
在Vue3中，如果在`<script setup>`的根作用域中直接获取`props`的值，会导致该值失去响应性。为了解决这个问题，可以使用计算属性来获取`props`的值，从而保证响应性。下面是一个使用计算属性获取`props`的例子： ```vue <template> <div>{{ A }}</div> </template> <script setup> import { defineProps, computed } from 'vue'; const props = defineProps({ A: String }); const A = computed(() => { return props.A; }); </script> ``` 在上面的例子中，我们使用了`computed`函数来创建一个计算属性`A`，该计算属性返回`props.A`的值。这样，我们就可以在模板中使用`A`来获取`props.A`的值，并且保证了响应性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值