如何优雅处理异步组件加载：Vue 3 的 Suspense 特性

news2024/9/21 18:30:47

在日常开发中，我们可能会遇到网络不佳或内容加载时间较长的情况。如果当前页面没有任何内容提示，用户的体验非常糟糕，可能会反复刷新以便加载成功。因此，我们需要给用户提供一个加载中的效果，告知用户“我在努力加载中，请稍候，不要离开！”。

1. 简单介绍

Suspense 是 Vue 3 引入的一个新特性，专门用于处理异步组件的加载。它可以让开发者在异步组件还未准备好之前，呈现一个“加载中”的状态，并在组件加载完成后，自动切换到实际内容。

2. 基本使用

Suspense 组件通过 <Suspense> 标签使用，它通常包括两个部分：

1、default 主内容：异步加载的组件

2、fallback 内容：在主内容未加载完成前展示的内容

举个 🌰

<!-- MyComponent -->
<template>
  <div class="container">
    <h1>这是实际组件的内容</h1>
  </div>
</template>

<template>
  <Suspense>
    <!-- 主内容 -->
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <h1>我在努力加载中，请稍候，不要离开！</h1>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

// 异步加载组件
const AsyncComponent = defineAsyncComponent(() => import('./components/MyComponent.vue'))
</script>

例子中，AsyncComponent 是一个异步加载的组件。当它在后台加载时，Suspense 会展示 fallback 中的内容。当组件加载完成后，fallback 中的内容会自动被 AsyncComponent 替换。

3. 事件和属性

3.1 onPending + onResolve

<Suspense> 支持 onPending 和 onResolve 事件，用于监听异步操作的状态：

- onPending：当任何一个异步组件开始加载时触发。

- onResolve：当所有异步组件加载完成时触发。

举个 🌰

<template>
  <Suspense :onPending="handleMainContentPending" :onResolve="handleMainContentResolve">
    <template #default>
      <Suspense :onPending="handleComponentAPending" :onResolve="handleComponentAResolve">
        <template #default>
          <AsyncComponentA />
        </template>
        <template #fallback>
          <div>加载组件 A 中...</div>
        </template>
      </Suspense>
    </template>
    <template #fallback>
      <div>加载主内容中...</div>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

// 定义异步组件
const AsyncComponentA = defineAsyncComponent(() => import('./components/ComponentA.vue'))
const handleMainContentPending = () => {
  console.log('开始加载主内容...')
}
const handleMainContentResolve = () => {
  console.log('主内容加载完成！')
}
const handleComponentAPending = () => {
  console.log('加载组件 A...')
}
const handleComponentAResolve = () => {
  console.log('组件 A 加载完成！')
}
</script>

3.2 timeout

<Suspense> 还支持 timeout 属性，用于指定等待异步组件加载的超时时间。如果超时，fallback 插槽会继续展示，直到加载完成。超时不会取消异步组件的加载，只是影响 fallback 的显示时间。

<Suspense timeout="3000">
  <template #default>
    <AsyncComponentA />
  </template>
  <template #fallback>
    <div>Loading took too long!</div>
  </template>
</Suspense>

4. 易错点！！

错误 🌰 实例一：

<template>
  <Suspense>
    <template #default>
      <div>{{ data }}</div>
    </template>
    <template #fallback>
      <div>Loading data...</div>
    </template>
  </Suspense>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const data = ref(null)

    onMounted(() => {
      setTimeout(() => {
        data.value = 'Loaded data'
      }, 2000)
    })

    return { data }
  }
}
</script>

我们模拟 2 秒之后，data 的数据加载完成为“Loaded data”，理论上页面最开始应该展示“Loading data...”，但实际并没有。

分析一下：Suspense 组件主要用于处理异步组件的加载状态，能够在异步组件完成加载之前展示 fallback 插槽的内容，组件加载完成后，展示 default 插槽的内容。

📢📢：而代码中的 data 加载是使用 onMounted 钩子函数实现的，而不是使用异步组件。Suspense 不会监听普通的数据加载，而是专门处理异步组件的状态。

如果我们想要实现在数据加载时，显示一个加载中的提示，可以使用 Vue 的响应式系统和条件渲染。

<template>
  <div>
    <h1 v-if="loading">Loading data...</h1>
    <h1 v-else>{{ data }}</h1>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const data = ref(null)
const loading = ref(true)

const fetchData = async () => {
  // 模拟异步数据请求
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Loaded data！')
    }, 2000)
  })
}

onMounted(async () => {
  data.value = await fetchData()
  loading.value = false
})
</script>

错误 🌰 实例二：

补充知识：Suspense 支持多个异步组件的组合，直到所有异步组件加载完成后去掉 fallback 的内容。如果其中任何一个异步组件未加载完成，fallback 内容将继续展示。因此，多个异步组件加载时的延迟将取决于加载时间最长的那个组件。

<template>
  <div class="container">
    <h1>这是组件ComponentA的内容</h1>
  </div>
</template>

<template>
  <div class="container">
    <h1>这是组件ComponentB的内容</h1>
  </div>
</template>

<template>
  <Suspense>
    <template #default>
      <AsyncComponentA />
      <AsyncComponentB />
    </template>
    <template #fallback>
      <h1>我在努力加载中，请稍候，不要离开！</h1>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

// 定义两个异步组件
const AsyncComponentA = defineAsyncComponent(() => import('./components/ComponentA.vue'))
const AsyncComponentB = defineAsyncComponent(() => import('./components/ComponentB.vue'))
</script>

乍一看，是不是很有道理，当 AsyncComponentA 和 AsyncComponentB 加载完成之后，展示内容，但是页面什么都没有，很奇怪。

控制台告诉我们原因：[Vue warn]: <Suspense> slots expect a single root node. 也就是 <Suspense>插槽需要一个根节点。

那就非常好解决，嵌套一层 <div> 就可以。

<template>
  <Suspense>
    <template #default>
      <div>
        <AsyncComponentA />
        <AsyncComponentB />
      </div>
    </template>
    <template #fallback>
      <h1>我在努力加载中，请稍候，不要离开！</h1>
    </template>
  </Suspense>
</template>