当前位置：首页 > article >正文

Vue3 Suspense：处理异步渲染过程

article 2024/12/28 5:27:29

什么是 Vue3 Suspense？

<Suspense> 是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。

Vue3 Suspense 是 Vue.js（v3.2.0+）中引入的新特性，旨在提高用户体验，使得页面的加载状态更加平滑。与传统的 Loading Component 不同，Suspense 可以直接控制应用程序的状态，而不需要渲染任何 DOM。

Vue3 Suspense 是 Vue3 的一个新特性，可以优化和改善异步组件的加载过程。Vue3 Suspense 可以让我们从异步加载组件的方式中摆脱回调函数或 promise 链式调用的方式，取而代之的是使用统一的懒加载语法，将所有的异步组件声明分离出来。

当组件被加载时，如果节点还未准备好，则强制组件渲染进入暂停状态。这样可以使页面更平滑，用户不会感受到页面刷新的过程。

在 Vue 中，可以将组件通过 import 函数动态导入：

const Foo = () => import('./Foo.vue')

但是由于异步加载的组件需要一定的时间才能完成加载，因此在加载过程中页面可能会处于空白状态，这样就会给用户带来不好的体验。

在 Vue3 中，可以通过使用 Suspense 来解决这个问题。 Suspense 可以定义一些占位符，用于在异步组件加载完成前展示内容，并且可以在异步组件加载完成后自动切换到真正的组件。

Vue3 Suspense 如何优化异步组件加载？

异步请求并行加载

Vue3 Suspense 允许并行加载多个异步组件，而不是像之前版本中那样按顺序一个个加载。这样可以减少等待时间，提高加载速度和用户体验。

在以下示例中，可以看到异步组件的加载是并行的。

<template>
  <div>
    <h1>{{ message }}</h1>
    <suspense>
      <template #default>
         <async-component></async-component>
         <async-component></async-component>
         <async-component></async-component>
      </template>
      <template #fallback>
        Loading...
      </template>
    </suspense>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AsyncComponent from './AsyncComponent.vue'

const message = ref('Hello, World!')
</script>

</script>

在上面的代码中，定义了三个异步组件并行加载，这意味着它们将同时下载，并且不必等待前一个组件下载完成才开始下一个动态组件的下载。当组件被加载时，如果它们还没有准备好，Vue3 Suspense 会将组件渲染进入暂停状态，直到它们准备好，然后一起进行处理。

让异步组件懒加载并提前预取

Vue3 Suspense 中的另一个优化技术是让异步组件懒加载并执行提前预取。
通过懒加载，只有在使用时才会加载组件，而不是在页面初始加载时就把所有组件都加载好。
通过执行提前预取，可以在没有等待用户点击前提前加载组件，以确保在需要时可以立即使用。
以下示例演示了如何在 Vue3 Suspense 中懒加载并执行提前预取异步组件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <suspense>
      <template #default>
        <async-component></async-component>
      </template>
      <template #fallback>
        Loading...
      </template>
    </suspense>
  </div>
</template>

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

const message = ref('Hello, World!')

onMounted(async () => {
  const component = await AsyncComponent()
  component.__requestInterception = true // 开启拦截，提前预取
  component.__navigate('preload') // 提前预取
})
</script>

在上面的代码中，定义了一个异步组件，并在 onMounted 生命周期钩子函数中执行了提前预取操作。这样做可以在用户交互之前，即页面加载时就预先请求好组件，以提高用户体验。

如何在 Vue3 中使用 Suspense？

要使用 Vue3 Suspense，我们需要遵循以下三个基本步骤：

使用标记包裹异步组件。
在默认的标签中声明包含异步组件的标记。
在fallback 的标签中加入等待的提示信息。

以下是一个简单的 Vue3 Suspense 示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <suspense>
      <template #default>
        <async-component></async-component>
      </template>
      <template #fallback>
        Loading...
      </template>
    </suspense>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AsyncComponent from './AsyncComponent.vue'

const message = ref('Hello, World!')
</script>

在上面的代码段中，首先使用标记包裹了异步组件。然后，在默认模板标签中，声明了要渲染的异步组件，同时在 fallback 的模板标签中加入了“Loading…”提示信息。
在 Vue3 Suspense 中，用户体验更加友好，因为它可以让用户看到一个较为友好的提示信息，告诉用户正在努力加载，这样就不会让用户感到程序出现了错误或者挂起。