Dynamic loading of vue components

In ordinary Vue project development, it is difficult to meet a page with a thousand lines or even thousands of lines of code. After all, everyone will split the components. But if a page needs to be arranged and rendered through a dozen or dozens of components, it is necessary to use dynamic loading at this time.

During the development process, I encountered the development of the review flow. There are 7 or 8 types of business due to the different businesses reviewed, and there are several different workflows under each different business type, so there will be dozens of different workflow approvals. In addition to the basic information module display, each workflow also has its own unique information display module, so we may accidentally introduce and load a dozen or twenty components during development. So I thought why not use dynamic loading components to achieve it?

Of course, the company's project is not very convenient to display, let's write a demo to reflect the role of a dynamic loading!

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

insert image description here

You can see that the page loads two sub-components at one time, let's take a look at the effect after dynamic loading!

code first

<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:'个人信息',![动态渲染2](C:\Users\WS\Desktop\截图\动态渲染2.png)
            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>

insert image description here

It can be seen that the dynamic loading only needs to use the a component for the first time, and click to switch the tab to load the b component. So in the audit flow scenario, more than a dozen components are loaded at a time, but in fact, only four or five components are needed for conditional rendering to the page. Then it is very reasonable to use the dynamic loading method. If you don’t need it, don’t load it, which greatly saves the resources of network requests.

If you feel very familiar, in fact, it has been used in vue-router for a long time, and the lazy loading of routes is realized in the same way.

{
    
    
        path: '/404',
        name: '/404',
        component: () => import('@/views/404.vue'),
        meta: {
    
    
            title: '页面404',
        },
        hidden: true,
    },```

Dynamic loading of vue components

Guess you like