Maison > interface Web > Voir.js > Comment appliquer le chargement paresseux des composants asynchrones et du routage de vue3 vite

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

PHPz
Libérer: 2023-05-18 16:52:14
avant
3280 Les gens l'ont consulté

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')
Copier après la connexion
Copier après la connexion
  • 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>
Copier après la connexion

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(&#39;./views/home.vue&#39;),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
}
Copier après la connexion

Donc, la déclaration de composant asynchrone suivante :

const asyncPage = () => import(&#39;./views/home.vue&#39;)
Copier après la connexion
Copier après la connexion

est équivalente à :

const asyncPageWithOptions  = {
  component: () => import(&#39;./views/home.vue&#39;)
}
Copier après la connexion
  • 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(&#39;./views/home.vue&#39;),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
})
Copier après la connexion

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) => {
  /* ... */
}
Copier après la connexion
  • 2-3-2. .Toujours renvoyer Promise dans Vue 3.x :

// 3.x version
const asyncComponent = defineAsyncComponent(
  () => new Promise((resolve, reject) => {
      /* ... */
  })
)
Copier après la connexion

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([&#39;@/components/list.vue&#39;], resolve)
  },
}
Copier après la connexion

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 &#39;vue&#39;
const _import = (path) => defineAsyncComponent(() => import(`../views/${path}.vue`));
const routes = [
  {
    path: &#39;/async-component&#39;,
    name: &#39;asyncComponent&#39;,
    component: _import(&#39;home&#39;),
  }
];
Copier après la connexion
  • 3-1-2.Méthode import.meta.glob

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

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>
Copier après la connexion

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!

Étiquettes associées:
source:yisu.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal