面试题：Vue异步组件中如何处理简单的依赖关系

Question

在Vue异步组件场景下，假设组件A依赖组件B和组件C，且B和C无相互依赖关系，阐述如何在异步加载组件A时正确加载B和C，并确保它们在A渲染前可用。

Answer 1

1. 使用defineAsyncComponent：
   • 在Vue 3中，可以使用defineAsyncComponent来定义异步组件。对于组件A，在定义时，分别对组件B和C使用defineAsyncComponent进行异步导入。
   • 示例代码如下：

   <template>
     <ComponentA />
   </template>
   
   <script setup>
   import { defineAsyncComponent } from 'vue';
   
   const ComponentA = defineAsyncComponent(() => import('./ComponentA.vue'));
   const ComponentB = defineAsyncComponent(() => import('./ComponentB.vue'));
   const ComponentC = defineAsyncComponent(() => import('./ComponentC.vue'));
   
   // 可以在ComponentA内部使用ComponentB和ComponentC
   </script>
   

2. 在组件A中处理依赖：
   • 在组件A的setup函数中，可以通过import()语法提前加载组件B和C，确保它们在A渲染前可用。
   • 示例代码如下：

   <template>
     <div>
       <ComponentB v-if="ComponentB" />
       <ComponentC v-if="ComponentC" />
       <!-- A的其他内容 -->
     </div>
   </template>
   
   <script setup>
   import { ref } from 'vue';
   
   const ComponentB = ref(null);
   const ComponentC = ref(null);
   
   // 提前加载组件B和C
   import('./ComponentB.vue').then((module) => {
     ComponentB.value = module.default;
   });
   import('./ComponentC.vue').then((module) => {
     ComponentC.value = module.default;
   });
   </script>
   

3. 使用Suspense组件（Vue 3）：
   • 结合Suspense组件，将组件A包裹起来。在Suspense的fallback中可以显示加载状态。
   • 示例代码如下：

   <template>
     <Suspense>
       <ComponentA />
       <template #fallback>
         <div>Loading...</div>
       </template>
     </Suspense>
   </template>
   
   <script setup>
   import { defineAsyncComponent } from 'vue';
   
   const ComponentA = defineAsyncComponent(() => import('./ComponentA.vue'));
   // 组件A内部会处理ComponentB和ComponentC的异步加载，Suspense会等待所有异步依赖加载完成
   </script>
   

   • 在组件A内部同样可以使用defineAsyncComponent处理ComponentB和ComponentC的异步加载，Suspense会确保它们在A渲染前加载完成。