Bagaimana untuk menggunakan Vue untuk melaksanakan pemuatan tak segerak dan pemuatan atas permintaan komponen?

Dalam pembangunan Vue, untuk meningkatkan prestasi aplikasi dan mengurangkan saiz aplikasi, kami sering menggunakan pemuatan tak segerak dan pemuatan atas permintaan komponen. Pemuatan komponen tak segerak membolehkan aplikasi memuatkan kod komponen hanya apabila diperlukan, bukannya memuatkan semua kod komponen sekaligus, sekali gus meningkatkan kelajuan pemuatan dan mengurangkan saiz aplikasi. Pemuatan atas permintaan membolehkan aplikasi memuatkan komponen secara dinamik melalui penghalaan, mengurangkan masa pemuatan pertama aplikasi dan masa permulaan.

Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan pemuatan tak segerak dan pemuatan komponen atas permintaan. Kami akan membincangkan cara menggunakan komponen tak segerak Vue dan menghala pemuatan malas untuk mencapai kedua-dua tujuan ini.

1. Komponen asynchronous

Vue komponen tak segerak memuatkan kod komponen hanya apabila diperlukan. Cara untuk menggunakan komponen tak segerak adalah seperti berikut:

1 Tentukan komponen tak segerak

Kita perlu mentakrifkan komponen tak segerak terlebih dahulu, dan dalam pengisytiharan komponen, gunakan fungsi menyelesaikan dan memerlukan.pastikan untuk memuatkan kod komponen.

Vue.component('async-component', function(resolve) {
  require.ensure(['./AsyncComponent.vue'], function() {
    resolve(require('./AsyncComponent.vue'));
  });
});

Dalam contoh di atas, kami menentukan komponen tak segerak AsyncComponent dan menggunakan require.ensure untuk memuatkan kod komponen. Fungsi menyelesaikan digunakan untuk menerima kod komponen dan melaksanakannya selepas kod komponen dimuatkan. Ambil perhatian bahawa fungsi memerlukan mesti dikembalikan untuk kod komponen berjaya dimuatkan.

2. Gunakan komponen tak segerak

Kita boleh menggunakan komponen tak segerak secara langsung dalam templat Vue.

<template>
  <async-component></async-component>
</template>

Di mana sahaja anda perlu menggunakan komponen tak segerak, hanya gunakan nama komponen secara terus. Kod komponen dimuatkan dan dipaparkan apabila komponen diberikan.

2. Menghalakan pemuatan malas

Pemuatan malas penghalaan adalah untuk memuatkan kod komponen secara dinamik melalui konfigurasi penghalaan, yang merupakan cara untuk mencapai pemuatan komponen atas permintaan. Cara untuk menggunakan routing lazy loading adalah seperti berikut:

1. Tentukan routing lazy loading

Kita perlu menentukan laluan terlebih dahulu dan menggunakan kaedah import dinamik untuk memuatkan kod komponen.

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

const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
]

Dalam contoh di atas, kami menentukan dua komponen Foo dan Bar, dan memuatkan kod komponen melalui kaedah import dinamik.

2. Gunakan routing lazy loading

Kita boleh menggunakan routing lazy loading secara terus dalam konfigurasi routing.

import Vue from 'vue'
import Router from 'vue-router'

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/foo',
      name: 'foo',
      component: Foo
    },
    {
      path: '/bar',
      name: 'bar',
      component: Bar
    }
  ]
})

Dalam laluan yang memerlukan pemuatan atas permintaan, gunakan kaedah import dinamik untuk memuatkan kod komponen. Apabila laluan diakses, kod komponen akan dimuatkan dan dipaparkan.

3. Ringkasan

Di atas ialah cara menggunakan Vue untuk melaksanakan pemuatan tak segerak dan pemuatan atas permintaan. Kami boleh menggunakan kaedah yang berbeza untuk mengoptimumkan komponen mengikut keperluan sebenar, meningkatkan prestasi aplikasi dan mengurangkan saiz aplikasi.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk melaksanakan pemuatan tak segerak dan pemuatan atas permintaan komponen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!