In der gewöhnlichen Vue-Projektentwicklung ist es schwierig, eine Seite mit tausend Zeilen oder sogar tausend Zeilen Code zu treffen, schließlich wird jeder die Komponenten aufteilen. Aber wenn eine Seite durch ein Dutzend oder Dutzende von Komponenten arrangiert und gerendert werden muss, ist es zu diesem Zeitpunkt notwendig, dynamisches Laden zu verwenden.
Während des Entwicklungsprozesses bin ich auf die Entwicklung des Überprüfungsablaufs gestoßen. Aufgrund der unterschiedlichen geprüften Unternehmen gibt es 7 oder 8 Arten von Unternehmen, und es gibt mehrere unterschiedliche Workflows für jede unterschiedliche Unternehmensart, sodass es Dutzende von verschiedenen Workflow-Genehmigungen geben wird. Zusätzlich zur Anzeige des Basisinformationsmoduls hat jeder Workflow auch sein eigenes einzigartiges Informationsanzeigemodul, sodass wir während der Entwicklung versehentlich ein Dutzend oder zwanzig Komponenten einführen und laden können. Also dachte ich, warum nicht dynamische Ladekomponenten verwenden, um dies zu erreichen?
Natürlich ist das Projekt des Unternehmens nicht sehr bequem anzuzeigen, lassen Sie uns eine Demo schreiben, um die Rolle eines dynamischen Ladens widerzuspiegeln!
<template>
<div>
<a />
<el-tabs
v-model="activeName"
type="card"
class="demo-tabs"
@tab-click="handleClick"
>
<el-tab-pane v-for="item in tabConfig" :key="item.id" :label="item.label" :name="item.id">
<component :is="item.cName" v-if="activeName == item.id" />
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import a from './components/a.vue'
import b from './components/b.vue'
export default {
data() {
return {
tabConfig:[
{
label:'账号信息',
id: 0,
cName:a
},
{
label:'个人信息',
id: 1,
cName:b
}
],
activeName:0
}
}
}
</script>
Sie können sehen, dass die Seite zwei Unterkomponenten gleichzeitig lädt, schauen wir uns den Effekt nach dem dynamischen Laden an!
zuerst codieren
<template>
<div>
<el-tabs
v-model="activeName"
type="card"
class="demo-tabs"
@tab-click="handleClick"
>
<el-tab-pane v-for="item in tabConfig" :key="item.id" :label="item.label" :name="item.id">
<component :is="item.cName" v-if="activeName == item.id" />
</el-tab-pane>
</el-tabs>
</div>
</template>
<script lang='ts' setup>
import {
ref, defineAsyncComponent } from 'vue'
const tabConfig = [
{
label:'账号信息',
id: 0,
cName:defineAsyncComponent(() => import('./components/a.vue'))
},
{
label:'个人信息',
id: 1,
cName:defineAsyncComponent(() => import('./components/b.vue'))
}
]
console.log(tabConfig[0].cName,'ppp');
let activeName = ref(0)
const handleClick = function () {
}
</script>
<style>
.el-tab-pane {
height: 100px;
}
</style>
Es ist ersichtlich, dass das dynamische Laden nur die a-Komponente verwenden muss, wenn es zum ersten Mal geladen wird, und die b-Komponente wird erst geladen, nachdem Sie auf die Registerkarte zum Wechseln geklickt haben. Im Audit-Flow-Szenario werden also mehr als ein Dutzend Komponenten gleichzeitig geladen, aber tatsächlich werden nur vier oder fünf Komponenten für das bedingte Rendering auf der Seite benötigt. Dann ist es sehr sinnvoll, die dynamische Lademethode zu verwenden.Wenn Sie es nicht brauchen, laden Sie es nicht, was die Ressourcen von Netzwerkanfragen erheblich spart.
Wenn Sie sich sehr vertraut fühlen, wird es in der Tat seit langem in vue-router verwendet, und das verzögerte Laden von Routen wird auf die gleiche Weise realisiert.
{
path: '/404',
name: '/404',
component: () => import('@/views/404.vue'),
meta: {
title: '页面404',
},
hidden: true,
},```