我用一个生活中的例子再来讲解下Suspense的作用:

假设我们要烧一锅汤,过程需要以下几个步骤:

• 把鸡放入锅中
• 倒水入锅中
• 打开火烧开
• 加入各种蔬菜肉类
• 加盐等调料然后起锅装盘
• 正常的做法是我们会按顺序一步步做下去,前面的没有做完,我们会耐心等待,不会进行后续操作。

但如果有些朋友不太会烧菜,不知道整个流程,他可能前面鸡放进锅了,就先去切蔬菜了。这显然是不对的。

而Suspense的作用,就是在整个烧菜流程中,我们在最开始就做好一个“等待提示”。

<WaitForFood>   
  <CookTheSoup>    
</WaitForFood>  
  
<template #fallback>  
  <ShowText>正在准备食材,请稍等</ShowText>    
</template>  

这里的 WaitForFood相当于是Suspense组件,它会包裹烧菜的整个过程;

当前面的步骤没有完成时,就会显示fallback位置的“正在准备食材,请稍等”文本。

这就能防止不会烧菜的人做错操作顺序了。

所以简单来说,Suspense的作用就是帮助我们处理异步操作流程,防止步骤执行错误。它让整个流程更加声明式和直观。

Suspense是Vue 3中新增的一个组件,它允许我们的组件等待异步操作完成后再进行渲染。Suspense组件可以让我们以一种更优雅的方式处理异步数据依赖。

• 假设我们有一个User Profile组件需要获取用户数据后再显示:

// UserProflie.vue  
  
export default {  
  async setup() {  
    const user = await fetchUser()    
    return {  
      user    
    }  
  }  
}

这里我们需要等待fetchUser()完成后再返回user。

如果不使用Suspense,我们需要在模板中对user数据为空时显示loading状态,这很麻烦。

有了Suspense后,我们可以直接包装Profile组件:

// App.vue  
function App(){  
  
  return (  
    <Suspense>  
      <UserProfile />    
      <template #fallback>  
        <loading/>    
      </template>  
    </Suspense>  
  )  
  
}

这样当UserProfile内部的异步操作未完成时,就自动展示fallback位置的loading组件。

当async操作完成,用户数据获取完成,UserProfile会自动重新渲染显示。

这样我们就不需要手动处理loading状态了。组件更简洁,也更符合逻辑关注点分离的思想。

总体来说,Suspense让异步数据处理变得更加声明式,使用起来更简单直观。