Vue3 Suspense에 대한 자세한 설명: 이것이 무엇인가요? 당신은 무엇을 할 수 있나요? 사용하는 방법?

이 글을 통해 Vue3 Suspense가 무엇인지, 무엇을 할 수 있는지, 어떻게 사용하는지에 대해 이야기해 보도록 하겠습니다.

서스펜스 당신이 생각하는 것과는 다릅니다. 예, 비동기식 구성 요소를 처리하는 데 도움이 되지만 그 이상입니다. (학습 비디오 공유: vue 비디오 튜토리얼)

Suspense를 사용하면 깊게 중첩된 모든 구성 요소를 포함하여 전체 애플리케이션의 로딩 상태를 조정할 수 있습니다. 모든 곳에서 로드되고 구성 요소가 갑자기 제자리로 돌진하는 팝콘 사용자 인터페이스 대신

Suspense를 사용하면 모든 것을 한 번에 로드하는 단일하고 체계적인 시스템을 가질 수 있습니다.

또한 Suspense는 세밀한 제어 기능을 제공하므로 필요한 경우 그 사이에 무언가를 구현할 수 있습니다.

이 글에서 우리는 Suspense가 무엇인지, 무엇을 하는지, 어떻게 사용하는지에 대해 많은 것을 배울 것입니다.

먼저 팝콘 인터페이스를 자세히 살펴보겠습니다. 그런 다음 Suspense를 사용하여 이러한 문제를 해결하는 방법을 살펴보십시오. 그런 다음 애플리케이션 전체에 Suspense를 중첩하여 더욱 세밀하게 제어해 보세요. 마지막으로 자리 표시자를 사용하여 사용자 인터페이스를 강화하는 방법을 간략하게 살펴보겠습니다.

팝콘 UI--서스펜스 전

예제 주소: https://codesandbox.io/s/uncoordinated-loading-before-suspense-srh8ll?file=/src/App.vue

서스펜스가 없는 경우 , 각 구성 요소는 로드 상태를 개별적으로 처리해야 합니다.

이렇게 하면 팝콘을 만드는 것처럼 여러 개의 로딩 버튼과 콘텐츠가 화면에 팝업되는 등 꽤 나쁜 사용자 경험을 초래할 수 있습니다.

이러한 로딩 상태를 처리하기 위해 추상 구성 요소를 만들 수 있지만 Suspense를 사용하는 것보다 훨씬 어렵습니다. 로딩 상태를 관리하기 위한 단일 지점을 갖는 것은 각 구성 요소가 자체 작업을 수행하는 것보다 유지 관리하기가 훨씬 쉽습니다.

예제에서는 BeforeSuspense 구성 요소를 사용하여 내부적으로 로드 상태를 처리하는 구성 요소를 시뮬레이션합니다. 일단 Suspense를 구현하면 이를 WithSuspense 구성 요소로 리팩터링하므로 이름을 BeforeSuspense로 지정합니다. BeforeSuspense组件来模拟一个内部处理加载状态的组件。把它命名为BeforeSuspense，因为一旦我们实现了Suspense，我们就会把它重构为WithSuspense组件。

BeforeSuspense.vue

<template>
    <div class="async-component" :class="!loading && &#39;loaded&#39;">
      <Spinner v-if="loading" />
      <slot />
    </div>
</template>

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

const loading = ref(true)
const { time } = defineProps({
  time: {
    type: Number,
    default: 2000
  }
})

setTimeout(() => (loading.value = false), time)
</script>

一开始设置 loading 为 true，所以显示 Spinner 组件。然后，当setTimeout完成后，将 loading 设置为 false，隐藏 Spinner  并使组件的背景为绿色。

在这个组件中，还包括一个 slot ，这样其它组件就可以套在 BeforeSuspense 组件中了:

<template>
    <button @click="reload">Reload page</button>
    <BeforeSuspense time="3000">
      <BeforeSuspense time="2000" />
      <BeforeSuspense time="1000">
        <BeforeSuspense time="500" />
        <BeforeSuspense time="4000" />
      </BeforeSuspense>
    </BeforeSuspense>
</template>

没有什么太花哨的东西。只是一些嵌套的组件，有不同的时间值传递给它们。

下面，我们来看看怎么通过使用 Suspense 组件来改进这个爆米花用户界面。

Suspense

事例地址：https://codesandbox.io/s/coordinated-loading-with-suspense-b6dcbi?file=/src/App.vue

现在，我们使用Suspense来处理这些乱七八糟的东西，并将其变成一个更好的用户体验。

不过，首先我们需要快速了解一下Suspense到底是什么

Suspense 基础知识

以下是 Suspense 部分的基本结构

<Suspense>
  <!-- Async component here -->

  <template #fallback>
      <!-- Sync loading state component here -->
  </template>
</Suspense>

为了使用Suspense，把异步组件放入 default 槽，把回退加载状态放入 fallback 槽。

异步组件是以下两种情况之一:

• 一个带有async setup函数的组件，该组件返回一个Promise，或者在script setup中使用顶级await
• 使用 defineAsyncComponent 异步加载的组件

无论哪种方式，我们最终都会得到一个开始未解决 的 Promise ，然后最终得到解决。

当该 Promise 未被解决时，Suspense 组件将显示 fallback  槽中的内容。然后，当Promise 被解决时，它会在 default

🎜BeforeSuspense.vue🎜🎜

<template>
  <div class="async-component loaded">
    <!-- 这里不需要一个 Spiner 了，因为加载是在根部处理的 -->
    <slot />
  </div>
</template>

<script setup>
const { time } = defineProps({
  time: {
    type: Number,
    required: true
  }
})
// 加入一个延迟，以模拟加载数据
await new Promise(resolve => {
  setTimeout(() => {
    resolve()
  }, time)
})
</script>

🎜처음에 로딩을 true로 설정하면 Spinner 구성 요소가 표시됩니다. 그런 다음 setTimeout이 완료되면 로딩을 false로 설정하고 Spinner를 숨기고 구성 요소의 배경을 녹색으로 만듭니다. 🎜🎜이 구성 요소에는 BeforeSuspense 구성 요소에 다른 구성 요소를 중첩할 수 있도록 슬롯도 포함되어 있습니다. 🎜

<template>
  <button @click="reload">Reload page</button>
  <Suspense>
    <WithSuspense :time="2000">
      <WithSuspense :time="1500" />
      <WithSuspense :time="1200">
        <WithSuspense :time="1000" />
        <WithSuspense :time="5000" />
      </WithSuspense>
    </WithSuspense>

    <template #fallback>
      <Spinner />
    </template>
  </Suspense>
</template>

🎜너무 화려한 것은 없습니다. 서로 다른 시간 값을 가진 일부 중첩 구성 요소가 전달되었습니다. 🎜🎜이제 Suspense 구성 요소를 사용하여 팝콘 사용자 인터페이스를 개선하는 방법을 살펴보겠습니다. 🎜

🎜Suspense🎜

🎜예제 주소: https://codesandbox.io/s/coordinated-loading-with-suspense-b6dcbi?file=/src/App.vue🎜🎜이제 우리는서스펜스를 사용하면 이 혼란스러운 상황을 더 나은 사용자 경험으로 바꿀 수 있습니다. 🎜🎜그러나 먼저 Suspense가 무엇인지 빠르게 이해해야 합니다🎜

🎜Suspense 기본🎜

🎜다음은 Suspense 부분의 기본 구조입니다🎜

<template>
  <button @click="reload">Reload page</button>
  <Suspense>
    <WithSuspense :time="2000">
      <WithSuspense :time="1500" />
      <WithSuspense :time="1200">
        <WithSuspense :time="1000" />

                <!-- Nest a second Suspense component -->
        <Suspense>
          <WithSuspense :time="5000" />
          <template #fallback>
            <Spinner />
          </template>
        </Suspense>
      </WithSuspense>
    </WithSuspense>

    <template #fallback>
      <Spinner />
    </template>
  </Suspense>
</template>

🎜Suspense를 사용하려면 비동기 컴포넌트를 기본 슬롯인 경우 대체 로딩 상태를 fallback 슬롯에 넣습니다. 🎜🎜비동기 구성 요소는 다음 두 가지 상황 중 하나입니다. 🎜

• Promise를 반환하는 비동기 설정 함수가 있는 구성 요소 또는 스크립트 설정 code>최상위 await를 사용하세요.
• 구성 요소를 비동기적으로 로드하려면 defineAsyncComponent를 사용하세요.

🎜어느 쪽이든, 우리는 결국 해결되지 않은 채 시작되었다가 결국 해결되는 Promise를 얻으세요. 🎜🎜Promise가 해결되지 않으면 Suspense 구성 요소는 fallback 슬롯의 내용을 표시합니다. 그런 다음 Promise가 해결되면 default 슬롯에 비동기 구성 요소가 표시됩니다. 🎜

注意： 这里没有错误处理路基。起初我以为有，但这是对悬念的一个常见误解。如果想知道是什么导致了错误。可以使用onErrorCaptured钩子来捕捉错误，但这是一个独立于Suspense的功能。

现在我们对Suspense有了一些了解，让我们回到我们的演示应用程序。

管理异步依赖关系

为了让Suspense管理我们的加载状态，首先需要将BeforeSuspense组件转换成一个异步组件

我们将它命名为 WithSuspense，内容如下：

<template>
  <div class="async-component loaded">
    <!-- 这里不需要一个 Spiner 了，因为加载是在根部处理的 -->
    <slot />
  </div>
</template>

<script setup>
const { time } = defineProps({
  time: {
    type: Number,
    required: true
  }
})
// 加入一个延迟，以模拟加载数据
await new Promise(resolve => {
  setTimeout(() => {
    resolve()
  }, time)
})
</script>

我们已经完全删除了加载状态的Spinner，因为这个组件不再有加载状态了。

因为这是一个异步组件，setup 函数直到它完成加载才会返回。该组件只有在 setup 函数完成后才会被加载。因此，与BeforeSuspense组件不同，WithSuspense组件内容在加载完毕之前不会被渲染。

这对任何异步组件来说都是如此，不管它是如何被使用的。在setup函数返回（如果是同步的）或解析（如果是异步的）之前，它不会渲染任何东西。

有了WithSuspense组件，我们仍然需要重构我们的App组件，以便在Suspense组件中使用这个组件。

<template>
  <button @click="reload">Reload page</button>
  <Suspense>
    <WithSuspense :time="2000">
      <WithSuspense :time="1500" />
      <WithSuspense :time="1200">
        <WithSuspense :time="1000" />
        <WithSuspense :time="5000" />
      </WithSuspense>
    </WithSuspense>

    <template #fallback>
      <Spinner />
    </template>
  </Suspense>
</template>

结构和之前一样，但这次是在 Suspense 组件的默认槽中。我们还加入了 fallback  槽，在加载时渲染我们的Spinner组件。

在演示中，你会看到它显示加载按钮，直到所有的组件都加载完毕。只有在那时，它才会显示现在完全加载的组件树。

异步瀑布

如果你仔细注意，你会注意到这些组件并不像你想象的那样是并联加载的。

总的加载时间不是基于最慢的组件（5秒）。相反，这个时间要长得多。这是因为Vue只有在父异步组件完全解析后才会开始加载子组件。

你可以通过把日志放到WithSuspense组件中来测试这一点。一个在安装开始跟踪安装，一个在我们调用解决之前。

最初使用BeforeSuspense组件的例子中，整个组件树被挂载，无需等待，所有的 "异步 "操作都是并行启动的。这意味着Suspense有可能通过引入这种异步瀑布而影响性能。所以请记住这一点。

嵌套 Suspense  以隔离子树

事例地址：https://codesandbox.io/s/nesting-suspense-wt0q7k?file=/src/App.vue

这里有一个深度嵌套的组件，它需要整整5秒来加载，阻塞了整个UI，尽管大多数组件加载完成的时间要早得多。

但对我们来说有一个解决方案

通过进一步嵌套第二个Suspense组件，我们可以在等待这个组件完成加载时显示应用程序的其他部分。

<template>
  <button @click="reload">Reload page</button>
  <Suspense>
    <WithSuspense :time="2000">
      <WithSuspense :time="1500" />
      <WithSuspense :time="1200">
        <WithSuspense :time="1000" />

                <!-- Nest a second Suspense component -->
        <Suspense>
          <WithSuspense :time="5000" />
          <template #fallback>
            <Spinner />
          </template>
        </Suspense>
      </WithSuspense>
    </WithSuspense>

    <template #fallback>
      <Spinner />
    </template>
  </Suspense>
</template>

将其包裹在第二个Suspense组件中，使其与应用程序的其他部分隔离。Suspense组件本身是一个同步组件，所以当它的父级组件被加载时，它就会被加载。

然后它将显示它自己的 fallback 内容，直到5秒结束。

通过这样做，我们可以隔离应用程序中加载较慢的部分，减少我们的首次交互时间。在某些情况下，这可能是必要的，特别是当你需要避免异步瀑布时。

从功能的角度来看，这也是有意义的。你的应用程序的每个功能或 "部分"都可以被包裹在它自己的Suspense组件中，所以每个功能的加载都是一个单一的逻辑单元。

当然，如果你用 "Suspense" 包装每一个组成部分，我们就会回到我们开始的地方。我们可以选择以任何最合理的方式来批处理我们的加载状态。

使用占位符的 Suspense

事例地址： https://codesandbox.io/s/placeholders-and-suspense-k5uzw0?

与其使用单一的 spinner，占位符组件往往可以提供更好的体验。

这种方式向用户展示将要展示的内容，并让他们在界面渲染前有一种期待的感觉。这是 spinner 无法做到的。

可以说--它们很时髦，看起来很酷。因此，我们重构代码，使用占位符方式:

<template>
  <button @click="reload">Reload page</button>
  <Suspense>
    <WithSuspense :time="2000">
      <WithSuspense :time="1500" />
      <WithSuspense :time="1200">
        <WithSuspense :time="1000" />

        <Suspense>
          <WithSuspense :time="5000" />
          <template #fallback>
            <Placeholder />
          </template>
        </Suspense>
      </WithSuspense>
    </WithSuspense>
    <template #fallback>
      <!-- 这里，复制实际数据的形状  -->
      <Placeholder>
        <Placeholder />
        <Placeholder>
          <Placeholder />
          <Placeholder />
        </Placeholder>
      </Placeholder>
    </template>
  </Suspense>
</template>

我们安排了这些Placeholder组件，并对它们进行了风格化处理，使它们看起来与WithSuspense组件完全一样。这提供了一个在加载和装载状态之间的无缝过渡。

在演示中，Placeholder组件在背景上给我们提供了一个CSS动画，以创造一个脉动的效果:

.fast-gradient {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.4)
  );
  background-size: 200% 200%;
  animation: gradient 2s ease-in-out infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

总结

爆米花的加载状态是非常明显的，会伤害用户体验。

幸运的是，Suspense 是一个很棒的新特性，它为我们在Vue应用程序中协调加载状态提供了很多选择。

然而，在写这篇文章的时候，Suspense仍然被认为是实验性的，所以要谨慎行事。关于它的状态的最新信息，请参考文档。

（学习视频分享：web前端开发、编程基础视频）

위 내용은 Vue3 Suspense에 대한 자세한 설명: 이것이 무엇인가요? 당신은 무엇을 할 수 있나요? 사용하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!