So wenden Sie Lazy Loading von asynchronen Vue3-Vite-Komponenten und Routing an

1. Vorwort

1-1. Drei Änderungen:

• Änderungen in der Deklarationsmethode für asynchrone Komponenten: Vue 3.x fügt eine neue Hilfsfunktion defineAsyncComponent hinzu, um die Deklaration asynchroner Komponenten anzuzeigen Die Komponentenoption in der Methode wird in Loader umbenannt. Die vom Loader gebundene Komponentenladefunktion empfängt keine Auflösungs- und Ablehnungsparameter mehr und muss ein Promise zurückgeben. 1-2 Der Grund für die Einführung der Hilfsfunktion defineAsyncComponent :

Da nun in Vue 3 funktionale Komponenten als reine Funktionen definiert sind, muss die asynchrone Komponentendefinition explizit definiert werden, indem sie in einen neuen defineAsyncComponent-Helfer eingeschlossen wird.

• 2. Vergleich von Vue 2.x- und Vue 3.x-Definitionen

2-1. Vergleich von asynchronen Komponenten-/Routing-Definitionen
2-1-1. In Vue 2.x wird nur eine asynchrone Komponente deklariert erfordert So:

const asyncPage = () => import('./views/home.vue')

2-1-2 In Vue 3.x muss der Import asynchroner Komponenten explizit mit der Hilfsfunktion defineAsyncComponent deklariert werden. Wie folgt:

<template>
  <div>
    <h2>Async Components</h2>
    <p>异步组件测试</p>
    <child />
  </div>
</template>
<script>
import { defineAsyncComponent } from &#39;vue&#39;
const child = defineAsyncComponent(() => import(&#39;@/components/async-component-child.vue&#39;))
export default {
  name: &#39;async-components&#39;,
  components:{
    &#39;child&#39;: child
  }
};
</script>

2-2. Vergleich der Deklarationsmethoden
2-2-1. Die Deklaration asynchroner Komponenten in Vue 2.x verfügt über eine erweiterte Deklarationsmethode. Wie folgt:

• const asyncPageWithOptions  = {
    component: () => import('./views/home.vue'),
    delay: 200,
    timeout: 3000,
    error: ErrorComponent,
    loading: LoadingComponent
  }

  Nach dem Login kopieren

  Die folgende asynchrone Komponentendeklaration:

  const asyncPage = () => import('./views/home.vue')

  Nach dem Login kopieren

  Nach dem Login kopieren
entspricht also:

const asyncPageWithOptions  = {
  component: () => import('./views/home.vue')
}

2-2-2. Asynchrone Komponenten können in Vue 3.x auch so deklariert werden. Lediglich die Komponente muss auf Loader umgestellt werden. Wie folgt:

• const asyncPageWithOptions  = defineAsyncComponent({
    loader: () => import('./views/home.vue'),
    delay: 200,
    timeout: 3000,
    error: ErrorComponent,
    loading: LoadingComponent
  })

  Nach dem Login kopieren
2-3. Die asynchrone Komponentenladefunktion gibt den Vergleich zurück

2-3-1. Erhalten Sie Auflösung und Ablehnung in Vue 2.x:

• // 2.x version
  const oldAsyncComponent = (resolve, reject) => {
    /* ... */
  }

  Nach dem Login kopieren

2-3-2 .In Vue 3.x immer Promise zurückgeben:

// 3.x version
const asyncComponent = defineAsyncComponent(
  () => new Promise((resolve, reject) => {
      /* ... */
  })
)

Die asynchrone Komponentenladefunktion von Vue 3.x empfängt keine Auflösung und Ablehnung mehr und muss immer Promise zurückgeben. Mit anderen Worten: In Vue 3.x wird der Empfang von Auflösungsrückrufen über Factory-Funktionen zum Definieren asynchroner Komponenten nicht mehr unterstützt.

• // 在 Vue 3.x 中不适用
  export default {
    components: {
      asyncPage: resolve => require(['@/components/list.vue'], resolve)
    },
  }

  Nach dem Login kopieren

  3. Vue3-Übungen

Tipps: Wenn Sie das Vite-Tool zum Erstellen des Projekts verwenden, verwenden Sie Import für Routing und Lazy Loading während der lokalen Entwicklung, es wird jedoch eine Warnung angezeigt, wenn es in die Produktion gepackt wird Umgebung wird ein Fehler gemeldet und die Seite wird nicht normal angezeigt. Dies kann mit den folgenden zwei Methoden erreicht werden.

3-1. Routing-Lazy-Loading-Implementierung
3-1-1.defineAsyncComponent-Methode

// router/index.js
import { defineAsyncComponent } from 'vue'
const _import = (path) => defineAsyncComponent(() => import(`../views/${path}.vue`));
const routes = [
  {
    path: '/async-component',
    name: 'asyncComponent',
    component: _import('home'),
  }
];

3-1-2.import.meta.glob-Methode

// 1.上面的方法相当于一次性加载了 views 目录下的所有.vue文件，返回一个对象
const modules = import.meta.glob('../views/*/*.vue');
const modules ={
    "../views/about/index.vue": () => import("./src/views/about/index.vue")
}
// 2.动态导入的时候直接，引用
const router = createRouter({
  history: createWebHistory(),
  routes: [
    // ...
    {
      path: 'xxxx',
      name: 'xxxxx',
      // 原来的方式，这个在开发中可行，但是生产中不行
      // component: () => import(`../views${menu.file}`),
      // 改成下面这样
      component: modules[`../views${filename}`]
    }
    // ...          
  ],
})

3-2. Asynchrone Komponentenimplementierung

• <template>
    <div>
      <h2>Async Components</h2>
      <p>异步组件测试</p>
      <child></child>
    </div>
  </template>
  <script>
  import { defineAsyncComponent } from &#39;vue&#39;
  const child = defineAsyncComponent(() => import(&#39;@/components/async-component-child.vue&#39;))
  export default {
    name: &#39;async-components&#39;,
    components:{
      &#39;child&#39;: child
    }
  };
  </script>

  Nach dem Login kopieren

  Das obige ist der detaillierte Inhalt vonSo wenden Sie Lazy Loading von asynchronen Vue3-Vite-Komponenten und Routing an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!