Cara menggunakan Suspense komponen tak segerak Vue3

Komponen suspens

menyebut di tapak web rasminya bahawa ia adalah ciri percubaan:
<suspense></suspense> ialah ciri percubaan. Ia tidak semestinya berakhir sebagai ciri yang stabil dan API mungkin berubah sebelum ia menjadi stabil.
<suspense></suspense> ialah komponen terbina dalam yang digunakan untuk menyelaraskan pemprosesan kebergantungan tak segerak dalam pepohon komponen. Ia membolehkan kami menunggu lebih tinggi di atas pepohon komponen untuk beberapa kebergantungan tak segerak bersarang di bawah untuk diselesaikan dan menyebabkan keadaan pemuatan semasa menunggu.

Ini bermakna komponen ini digunakan untuk memaparkan beberapa kandungan tambahan sementara menunggu komponen tak segerak, supaya aplikasi mempunyai pengalaman pengguna yang lebih baik

Untuk memahami masalah yang diselesaikan oleh <suspense></suspense> dan cara ia berinteraksi dengan kebergantungan async, kita perlu membayangkan hierarki komponen seperti ini:

<Suspense>
└─ <Dashboard>
   ├─ <Profile>
   │  └─ <FriendStatus>（组件有异步的 setup()）
   └─ <Content>
      ├─ <ActivityFeed> （异步组件）
      └─ <Stats>（异步组件）

Terdapat berbilang komponen bersarang dalam pepohon komponen ini, kita perlu menghuraikan beberapa async terlebih dahulu sumber. Tanpa <Suspense>, mereka masing-masing perlu mengendalikan pemuatan, pelaporan ralat dan status penyiapan mereka sendiri. Dalam senario terburuk, kita mungkin melihat tiga keadaan pemuatan berputar pada halaman, menunjukkan kandungan pada masa yang berbeza.

Dengan komponen <Suspense>, kami boleh memaparkan status pemuatan atau pemuatan gagal di peringkat atas sementara menunggu keputusan setiap pergantungan tak segerak dalam keseluruhan pepohon komponen berbilang peringkat.

Mari kita lihat contoh mudah:

Mula-mula anda perlu memperkenalkan komponen tak segerak

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

Untuk lebih ringkas, anda boleh menggunakan komponen untuk mencapai kesan pemuatan tak segerak

Kod komponen induk rumah adalah seperti berikut:

<template>
  <div class="home">
    <h4 id="我是Home组件">我是Home组件</h4>
    <Suspense>
       <template #default>
        <Child />
      </template>
      <template v-slot:fallback>
        <h4 id="Loading">Loading...</h4>
      </template>
    </Suspense>
  </div>
</template>
 
<script >
// import Child from &#39;./components/Child&#39;//静态引入
import { defineAsyncComponent  } from "vue";
const Child = defineAsyncComponent(() => import("../components/Child"));
export default {
  name: "",
  components: { Child },
};
</script>
 
<style>
.home {
  width: 300px;
  background-color: gray;
  padding: 10px;
}
</style>

Self component Child

<template>
  <div class="child">
    <h4 id="我是Child组件">我是Child组件</h4>
    name: {{user.name}}
    age: {{user.age}}
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "Child",
  async setup() {
    const NanUser = () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({
            name: "NanChen",
            age: 20,
          });
        },2000);
      });
    };
    const user = await NanUser();
    return {
      user,
    };
  },
};
</script>

<style>
.child {
  background-color: skyblue;
  padding: 10px;
}
</style>

Komponen dibezakan mengikut mekanisme slot, #default Kandungan dalam slot ialah Komponen tak segerak yang anda perlu buat; #fallback ialah memuatkan komponen statik yang anda tentukan.

Kesannya adalah seperti berikut:

Atas ialah kandungan terperinci Cara menggunakan Suspense komponen tak segerak Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!