Asas pembangunan VUE3: tutorial menggunakan komponen tak segerak

Vue 3 ialah versi utama terkini Vue.js, yang mempunyai banyak ciri dan peningkatan baharu berbanding Vue 2. Salah satu penambahbaikan yang paling ketara ialah penggunaan komponen tak segerak. Dalam artikel ini, kita akan mendalami penggunaan dan teknik komponen tak segerak dalam Vue 3.

Apakah komponen tak segerak?

Dalam Vue, komponen boleh diperkenalkan melalui penyataan import atau memerlukan fungsi. Komponen ini dipanggil komponen segerak, dan kodnya dimuatkan dan disusun serta-merta apabila aplikasi bermula. Walau bagaimanapun, apabila apl semakin besar, komponen yang dimuatkan secara serentak boleh menyebabkan masa pemuatan skrin pertama yang lebih lama malah menggunakan sejumlah besar memori dan lebar jalur.

Untuk menyelesaikan masalah ini, Vue 3 menyediakan konsep komponen tak segerak. Komponen tak segerak ialah komponen yang dimuatkan dan disusun apabila diperlukan. Ini bermakna apabila aplikasi perlu memuatkan komponen tertentu, ia akan meminta komponen ini secara tidak segerak daripada pelayan dan memuatkan serta menyusunnya secara dinamik selepas respons datang kembali. Ini boleh mengurangkan masa muat skrin pertama dengan ketara dan mengurangkan jejak memori aplikasi dan penggunaan lebar jalur.

Bagaimana untuk menggunakan komponen tak segerak?

Dalam Vue 3, komponen tak segerak boleh ditakrifkan dengan cara berikut:

const AsyncComponent = defineAsyncComponent(async () => {
  // 异步加载和编译组件的代码
  const module = await import("@/components/AsyncComponent.vue")
  return module.default
})

Kod di atas mentakrifkan tak segerak bernama AsyncComponent komponen . Cara untuk mentakrifkan komponen tak segerak adalah serupa dengan komponen tak segerak, kecuali komponen tak segerak perlu menggunakan fungsi defineAsyncComponent dan bukannya fungsi defineComponent.

Dalam takrif komponen tak segerak, kami memuatkan dan menyusun kod komponen secara tak segerak melalui kata kunci async dan await. Dalam contoh ini, kami menggunakan pernyataan import untuk memuatkan komponen daripada fail @/components/AsyncComponent.vue dan mengembalikan eksport lalainya. Perlu diingat bahawa dalam definisi komponen tak segerak, kita hanya perlu mengembalikan eksport lalai komponen, bukan contoh Vue atau pilihan komponen.

Setelah kami mentakrifkan komponen tak segerak, kami boleh menggunakannya dalam komponen induk. Sebagai contoh, jika kita ingin menggunakan komponen tak segerak yang ditakrifkan di atas dalam komponen App.vue, kita boleh melakukan ini:

<template>
  <div>
    <h1>异步组件</h1>
    <AsyncComponent />
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue"
const AsyncComponent = defineAsyncComponent(async () => {
  const module = await import("@/components/AsyncComponent.vue")
  return module.default
})

export default {
  components: {
    AsyncComponent
  }
}
</script>

Dalam kod di atas, komponen tak segerak components didaftarkan dalam AsyncComponent pilihan. Kemudian gunakan teg 78bf8e3d1471d68fca878c5a3db3c106 dalam templat untuk memaparkan komponen tak segerak.

Apabila komponen induk dipaparkan, Vue 3 akan mengesan teg 78bf8e3d1471d68fca878c5a3db3c106 dan kemudian meminta komponen tak segerak yang kami takrifkan daripada pelayan secara tak segerak. Sebaik sahaja respons tak segerak kembali, Vue akan memuatkan dan menyusun komponen secara dinamik dan memaparkannya pada halaman.

Selain kaedah di atas, kami juga boleh mentakrifkan komponen tak segerak dengan cara lain menggunakan fungsi defineAsyncComponent yang disediakan oleh Vue 3. Sebagai contoh, kita boleh menggunakan gabungan import dinamik dan fungsi defineAsyncComponent untuk mentakrifkan komponen tak segerak:

const AsyncComponent = defineAsyncComponent(() => import("@/components/AsyncComponent.vue"))

Kami juga boleh menggunakan sintaks Promise tradisional untuk menentukan komponen tak segerak:

const AsyncComponent = defineAsyncComponent(() =>
  new Promise(resolve => {
    setTimeout(() => {
      import("@/components/AsyncComponent.vue").then(module => {
        resolve(module.default)
      })
    }, 1000)
  })
)

Dalam kod di atas, kami menggunakan Promise dengan kelewatan 1 saat untuk mensimulasikan pemuatan tak segerak dan penyusunan komponen.

Kesimpulan

Komponen tak segerak ialah ciri yang berkuasa dan berguna dalam Vue 3. Dengan menggunakan komponen tak segerak, kami boleh meningkatkan prestasi dan pengalaman pengguna aplikasi kami dengan ketara. Dalam artikel ini, kami menyelami penggunaan dan teknik komponen tak segerak dalam Vue 3. Saya harap artikel ini dapat membantu anda memahami dan menggunakan komponen tak segerak Vue 3.

Atas ialah kandungan terperinci Asas pembangunan VUE3: tutorial menggunakan komponen tak segerak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!