Comment appliquer le chargement paresseux des composants asynchrones et du routage de vue3 vite

1. Préface

1-1. Trois changements :

• Changements dans la méthode de déclaration des composants asynchrones : Vue 3.x ajoute une nouvelle fonction auxiliaire definitionAsyncComponent pour afficher la déclaration des composants asynchrones

• Déclaration avancée des composants asynchrones L'option de composant dans la méthode est renommée en chargeur

• La fonction de chargement de composant liée par le chargeur ne reçoit plus les paramètres de résolution et de rejet et doit renvoyer une promesse

1-2 La raison de l'introduction de la fonction auxiliaire définirAsyncComponent. :

Maintenant, dans Vue 3, puisque les composants fonctionnels sont définis comme des fonctions pures, la définition du composant asynchrone doit être explicitement définie en l'enveloppant dans un nouvel assistant DefinAsyncComponent.

2. Comparaison des définitions de Vue 2.x et Vue 3.x

2-1 Comparaison des définitions de composant/routage asynchrone

• Dans Vue 2.x, déclarer un composant asynchrone uniquement. nécessite Comme ceci :

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

• 2-1-2. Dans Vue 3.x, l'importation de composants asynchrones doit être explicitement déclarée à l'aide de la fonction auxiliaire definitionAsyncComponent. Comme suit :

<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. Comparaison des méthodes de déclaration

• 2-2-1 La déclaration des composants asynchrones dans Vue 2.x a une méthode de déclaration plus avancée. Comme suit :

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

Donc, la déclaration de composant asynchrone suivante :

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

est équivalente à :

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

• 2-2-2. Les composants asynchrones peuvent également être déclarés comme ceci dans Vue 3.x. Seul le composant doit être changé en chargeur. Comme suit :

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

2-3. La fonction de chargement de composant asynchrone renvoie la comparaison

• 2-3-1 Recevoir la résolution et le rejet dans Vue 2.x :

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

• 2-3-2. .Toujours renvoyer Promise dans Vue 3.x :

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

La fonction de chargement de composants asynchrone de Vue 3.x ne recevra plus de résolution et de rejet et doit toujours renvoyer Promise. En d'autres termes, dans Vue 3.x, il n'est plus pris en charge de recevoir des rappels de résolution via des fonctions d'usine pour définir des composants asynchrones.

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

3. Pratique Vue3

Conseils : Si vous utilisez l'outil Vite pour créer le projet, utilisez l'importation pour le routage et le chargement paresseux pendant le développement local, mais un avertissement sera signalé lors de l'intégration dans la production. environnement, une erreur sera signalée et la page ne sera pas normale. L'affichage peut être obtenu en utilisant les deux méthodes suivantes.

Implémentation du chargement paresseux de routage

• Méthode 3-1-1.defineAsyncComponent

// 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.Méthode import.meta.glob

// 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. Implémentation de composants asynchrones

<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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!