uniapp + vue3开发中组合式函数必须是一个同步函数

目录

vue3中的组合式函数用法：

官网示例异步组合式函数：同步函数写法

 改造成导出async组合式函数时：

uniapp无法使用async组合式函数的原因：

---

vue3中的组合式函数使用时，导出的组合式函数必须是一个同步函数。

vue3中的组合式函数用法：

官网示例异步组合式函数：同步函数写法

这是官网示例，我们按示例运行一下：

 改造成导出async组合式函数时：

会发现模块无法渲染，同时有一个警告错误：

[Vue warn]: Component <Anonymous>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered. 
  at <CompositionFunction> 
  at <VanTab title="组合式函数" name="e" > 
  at <VanTabs ref=Ref< Proxy(Object) {…} > count=4 inited=false  ... > 
  at <VanTabs active="e" onUpdate:active=fn > 
  at <Test onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <RouterView> 
  at <App>

原来是因为当组合式函数为一个async函数时，setup函数会变成一个promise，此时必须使用vue3中的新组件<Suspense>将组件包裹起来，否则无法渲染。

我们包起来试试：

 发现成功了。

uniapp无法使用async组合式函数的原因：

 那么，同样的操作，我们为什么在uniapp中不行呢？

因为 uniapp 不支持 <Suspense>

因此在uniapp中，只能使用同步的组合式函数写法，异步就GG

顺便贴一下报错截图：