『引言』

今天来介绍两个内置组件Fragment、Suspense。

在React中，会使用到简写的空标签<>……</>，用于解决在模板中只能有一个根元素的限制。

Vue3中使用一个内置组件Fragment组件，解决相同的问题。

当异步加载组件时，可能会在加载过程中出现页面空白的状态，毕竟异步加载组件需要一定的时间才能完成。

出现空白页面的情况，肯定会影响用户的体验。

在Vue3中，可以通过使用 Suspense 来解决这个问题。实现组件的异步加载和渲染，同时提高用户体验。

Fragment简化了结构的组织，减少标签层级，减少内存占用。而Suspense让异步内容的处理变得优雅。

『Fragment』

『用法』

在vue2中：组件必须有一个根标签

<template> 
  <div> 
    <h1>介绍</h1> 
    <p>大家好，我叫wnxx</p> 
    <span>我今年3岁</span> 
  </div> 
</template>

在vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中

<template> 
  <Fragment> 
    <h1>介绍</h1> 
    <p>大家好，我叫pupu</p> 
    <span>我今年3岁</span> 
  </Fragment> 
</template>

『注意⚠️』

• 除了<Fragment></Fragment>写法，还可以使用<>……</>写法，作用完全相同。
• 还存在一个bug

组件Introduction:

<template>
   <h1>介绍</h1> 
   <p>大家好，我叫wnxx</p> 
</template>

<template>
   <Introduction v-if="show" /> 
   <Introduction v-show="show" /> 
</template>
<script setup>
import Introduction from '../components/Introduction.vue'
const show = ref(false)
<scrip>

『代码解析』

v-if一切正常，v-show异常，show为false还是显示了。 v-show的display:none属性完全是没有的。

解决办法：还是需要使用vue2的写法。

『Suspense』

『定义』

【官方解释】 用于协调对组件树中嵌套的异步依赖的处理。

• 详细信息

  <Suspense> 接受两个插槽：#default 和 #fallback。它将在内存中渲染默认插槽的同时展示后备插槽内容。

  如果在渲染时遇到异步依赖项 (异步组件和具有 async setup() 的组件)，它将等到所有异步依赖项解析完成时再显示默认插槽。

【我的理解】 它可以帮助更好地处理组件的异步加载和渲染。

『Suspense组件的两个插槽』

#default 和 #fallback。两个插槽都只允许一个直接子节点。在可能的时候都将显示默认槽中的节点。否则将显示后备槽中的节点。

『用法』

• 异步引入组件

  import {defineAsyncComponent} from 'vue';
  const Child = defineAsyncComponent(()=>import('./components/Child.vue'));

• 使用Suspense包裹组件，并使用v-slot指令配置好 fallback 和 default 插槽的内容
• default为默认的值，fallback为没加载出来的提示

 <template>
    <div class="app">
      <Suspense>
        <template v-solt:defalt>
          <Child />
        </template>
        
        <template v-solt:fallback>
          <h3>加载中...</h3>
        </template>
      </Suspense>
    </div>
  </template>

『官网示例』

『注意⚠️』

<Suspense> 是一项实验性功能。它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。

『Suspense适用情况』

1. 异步组件加载：当应用需要在渲染组件之前等待异步组件加载完成时，可以使用 Suspense。
2. 数据加载：当需要等待异步数据加载完成后再渲染组件，为了避免渲染空白等情况时，可以使用 Suspense。

『处理数据加载示例🌰』

<template>
  <Suspense>
    <template #default>
      <Child :data-list="dataList" />
    </template>

    <template #fallback>
       <h3>加载中...</h3>
    </template>
  </Suspense>
</template>

『代码解析』

在上面的示例中，Child 组件会根据 dataList 属性加载用户数据。

当数据加载完成时，它将显示用户信息，但在数据加载期间，Suspense 会显示 加载中...。