vue3异步组件加载

业务背景

业务上有个页面按流程节点展示不同模块，有可复用的，但顺序又不一致，不想用template if条件判断写多次，故提取各部分 作为子组件，按需加载

解决方式

template部分

<template>
  <h2>明细页</h2>
  <template v-for="component in components" :key="component">
    <component :is="component" />
  </template>
  <van-button @click="loadComp">load</van-button>
</template>

js部分

<script setup>
  import {
    defineAsyncComponent,
    shallowRef
  } from 'vue';
  
  // ✨ 以下是按需加载的组件，存在于./process文件夹下
  let dynamicArr = [
    'FaultConfirm',
    'DeviceInfo',
    'OrderInfo',
    'PartsInfo',
  ]
  let components = shallowRef([]); // 使用shallowRef ❗❗
  function loadComp() {
    let tempComponents = [];
    for (let i=0; i<dynamicArr.length; i++) { // for let循环，有序引入异步组件
      tempComponents.push(defineAsyncComponent(() => import(`./process/${dynamicArr[i]}.vue`))); // defineAsyncComponent ❗❗
    }
    components.value = tempComponents;
  }
</script>