Composants dynamiques et composants asynchrones de Vue et keep-alive

1. Composants dynamiques

Des composants dynamiques sont utilisés , implémentés component 组件via un attribut spécialis

Prenons un exemple pour expliquer comment les composants dynamiques sont utilisés

. Comme le montre la figure ci-dessus, par exemple, nous voulons maintenant implémenter une fonction : cliquez sur une barre d'onglets pour basculer l'affichage des différents composants.

Dans ce cas, nous pouvons y parvenir grâce à trois idées de mise en œuvre différentes

• 方式一: A en juger par v-if, affichant différents composants
• 方式二: La voie des composants dynamiques
• 方式三: utilisez route router-link et router-view

v-if affiche différents composants

<template>
  <div>
    <button
      v-for="item in tabs"
      :key="item"
      @click="itemClick(item)"
      :class="{active: currentTab === item}"
    >{
    
    {
    
    item}}</button>

    <!-- 1.v-if的判断实现 -->
    <template v-if="currentTab === 'home'">
      <home></home>
    </template>
    <template v-else-if="currentTab === 'about'">
      <about></about>
    </template>
    <template v-else>
      <category></category>
    </template>

  </div>
</template>

<script>
import Home from './pages/Home.vue';
import About from './pages/About.vue';
import Category from './pages/Category.vue';

export default {
    
    
  components: {
    
    
    Home,
    About,
    Category
  },
  data () {
    
    
    return {
    
    
      tabs: ["home", "about", "category"],
      currentTab: "home"
    }
  },
  methods: {
    
    
    itemClick (item) {
    
    
      this.currentTab = item;
    }
  }
}
</script>

<style scoped>
.active {
    
    
  color: red;
}
</style>

Implémentation de composants dynamiques

<template>
  <div>
    <button
      v-for="item in tabs"
      :key="item"
      @click="itemClick(item)"
      :class="{active: currentTab === item}"
    >{
    
    {
    
    item}}</button>
    <!-- 2.动态组件 -->
    <component :is="currentTab"></component>
  </div>
</template>

<script>
import Home from './pages/Home.vue';
import About from './pages/About.vue';
import Category from './pages/Category.vue';

export default {
    
    
  components: {
    
    
    Home,
    About,
    Category
  },
  data () {
    
    
    return {
    
    
      tabs: ["home", "about", "category"],
      currentTab: "home"
    }
  },
  methods: {
    
    
    itemClick (item) {
    
    
      this.currentTab = item;
    }
  }
}
</script>

<style scoped>
.active {
    
    
  color: red;
}
</style>

注意：上面is后的currentTab的值需要是什么内容呢？

• Peut être un composant enregistré via la fonction de composant
• Composants enregistrés dans l'objet composants d'un objet composant

Passage par valeur pour les composants dynamiques

S'il s'agit de composants dynamiques, pouvons-nous leur transmettre des valeurs et écouter les événements ?

• La valeur est la même que celle du composant de base, mais nous devons la 属性和监听事件mettre sur le composant à utiliser
  

二 、 garder en vie

• Nous transformons le composant À propos dans le cas ci-dessus
• Ajout d'un bouton à la fonction qui peut être incrémenté lorsqu'on clique dessus
  
• Par exemple, si nous réglons le compteur à 10, l'état peut-il être maintenu lors du passage à la maison puis du retour à environ ?
• la réponse est négative
• C'est parce que par défaut nous sommes切换组件后，about组件会被销毁掉，再次回来时会重新创建组件
• Cependant, dans certains cas au cours du développement, nous souhaitons conserver l'état du composant au lieu de le détruire. A ce stade, nous pouvons utiliser un composant intégré : keep-alive
  
  la propriété keep-alive
• include- chaîne|RegExp|Tableau. Seuls les composants dont les noms correspondent seront mis en cache
   ;
• exclude- chaîne|RegExp|Tableau. Tout composant avec un nom correspondant ne sera pas
  mis en cache
• max- nombre | chaîne. Nombre maximal d'instances de composant pouvant être mises en cache. Une fois
  ce nombre atteint, les instances du composant mis en cache qui n'ont pas été consultées récemment seront détruites.
• inclure et exclure les accessoires permettent aux composants de mettre en cache de manière conditionnelle
• Les deux peuvent être 逗号分隔字符串、正则表达式或一个数组utilisés pour représenter
• La correspondance vérifie d'abord le cycle de vie du composant de name 选项
  
  cache du composant

Pour les composants mis en cache, lors de la nouvelle saisie, nous n'exécuterons pas les fonctions de cycle de vie telles que créées ou montées

• Mais parfois, nous voulons écouter quand nous rentrons dans le composant et quand nous quittons le composant
• À l'heure actuelle, nous pouvons utiliser activated et deactivated ces deux fonctions de crochet de cycle de vie pour surveiller
  

3. Composants asynchrones

• Sous-package de code Webpack
• Processus d'emballage par défaut
• Par défaut, lors du processus de création de l'arborescence complète des composants, étant donné que les composants et les composants dépendent directement les uns des autres via la modularisation, webpack regroupera les modules de composants (comme un fichier app.js) lors de l'empaquetage.
• À ce moment 随着项目的不断庞大, app.js文件的内容过大, causera首屏的渲染速度变慢
• Lors de l'emballage, le sous-emballage du code
• Ainsi, pour certains composants qui n'ont pas besoin d'être utilisés immédiatement, nous pouvons les diviser séparément en quelques petits blocs de code chunk.js
• Ces chunk.js seront chargés depuis le serveur en cas de besoin, et le code sera exécuté pour afficher le contenu correspondant
• Alors, comment le code peut-il être sous-emballé dans Webpack ?
  
  Implémentation de composants asynchrones dans Vue
• Si notre projet est trop gros, pour 某些组件ce que nous voulons 通过异步的方式来进行加载(le but est de le sous-traiter), alors Vue nous propose une fonction :defineAsyncComponent
• defineAsyncComponent accepte deux types de paramètres
• 类型一: Fonction d'usine, qui doit retourner un objet Promise
• 类型二: accepte un type d'objet et configure la fonction asynchrone
• 工厂函数类型的写法
  - 对象类型一的写法
  
  Composants asynchrones et suspense
• Suspense est un composant global intégré qui a deux emplacements
• default: Si la valeur par défaut peut être affichée, alors affichez le contenu par défaut
• fallback: Si la valeur par défaut ne peut pas être affichée, le contenu de l'emplacement de repli sera affiché

<template>
  <div>
    App组件
    <home></home>

    <suspense>
      <template #default>
        <async-category></async-category>
      </template>
      <template #fallback>
        <loading></loading>
      </template>
    </suspense>

  </div>
</template>

<script>
  import {
    
     defineAsyncComponent } from 'vue';

  import Home from './Home.vue';
  import Loading from './Loading.vue';

  // import AsyncCategory from './AsyncCategory.vue';
  const AsyncCategory = defineAsyncComponent(() => import("./AsyncCategory.vue"))

  // const AsyncCategory = defineAsyncComponent({
    
    
  //   loader: () => import("./AsyncCategory.vue"),
  //   loadingComponent: Loading,
  //   // errorComponent,
  //   // 在显示loadingComponent组件之前, 等待多长时间
  //   delay: 2000,
  //   /**
  //    * err: 错误信息,
  //    * retry: 函数, 调用retry尝试重新加载
  //    * attempts: 记录尝试的次数
  //    */
  //   onError: function(err, retry, attempts) {
    
    

  //   }
  // })

  export default {
    
    
    components: {
    
    
      Home,
      AsyncCategory,
      Loading
    }
  }
</script>

<style scoped>

</style>