问题: Vue3项目中,在setup函数前加上了async,使其变成异步函数,导致页面空白不显示?

描述: 最近在学习Vue3项目,使用了CompositionAPI的书写方式,其中有一个setup函数,因为在这个函数中使用了请求等异步操作,所以需要使用async/await,但是在setup前加上async后,导致页面空白不显示了,去掉则页面正常显示;

解决: 在Vue3中,如果当前组件的setup使用了async/await,那么其调用组件的父组件的外层需要嵌套一个suspense标签,例如:
异步组件:

//这里是写异步的组件
async setup(){
	//内容
}

调用异步组件的父组件

    <suspense>
        <async-component/>
    </suspense>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐