vue3中动态引入组件并渲染组件

在开发中 有时会在打包或者各种可能的情况下 报错或警告提示 模块化打包的问题，
我们需要动态引入组件并渲染组件时，
方法1: 可以使用import引入结合component标签使用
如下举例

import { ref, markRaw } from 'vue'
const childrenComponent = ref();
onMounted(() => {
	//举例引入一个组件childrenComponent.vue
  import('**/..**../childrenComponent.vue').then((module) => {
    childrenComponent.value = markRaw(module.default);
    // 确保该赋值操作不会反复触发重新渲染
  });
});

可以使用component标签和:is 属性来动态创建和使用组件。

  <component :is="childrenComponent" v-if=" childrenComponent"/>

方法2: vue3的defineAsyncComponent

defineAsyncComponent 是 Vue 3 提供的一个功能，它允许你定义一个异步组件。这意味着组件的加载会被延迟，直到它真正需要被渲染到页面上时才会加载。这对于大型应用来说特别有用，因为它可以帮助减小初始加载时间，实现按需加载。

js中

import { defineAsyncComponent } from 'vue';
 
const AsyncComp = defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      // 模拟异步操作
      setTimeout(() => {
        // 模拟从服务器动态导入组件
        import('./children.vue').then(component => {
          resolve(component);
        });
      }, 1000);
    })
);
 
export default AsyncComp;

vue文件中
你可以像使用普通组件一样 import引入js 后使用 AsyncComp组件：

<template>
  <div>
    <AsyncComp />
  </div>
</template>
 
<script>
import AsyncComp from './path/to/AsyncComp.js';
 
export default {
  components: {
    AsyncComp
  }
}
</script>

defineAsyncComponent 可以接受一个返回 Promise 的工厂函数，如上例所示。
你也可以使用 import() 语法来定义组件：

import { defineAsyncComponent } from 'vue';
 
const AsyncComp = defineAsyncComponent(() =>
  import('./children.vue')
);

在这个例子中，children.vue 会在需要渲染 AsyncComp 组件时才被加载。
这种方式利用了原生的 ES6 import() 函数来动态导入组件，当异步组件被解析时，Vue 会自动处理组件的注册和渲染。

高级用法
defineAsyncComponent 还接受一个选项对象，允许你配置一些高级特性，比如加载中的组件、错误处理、延迟加载等：

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/AsyncComponent.vue'),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 200,
  timeout: 3000
});

• loader: 返回一个 Promise，该 Promise 应该 resolve 组件定义。
• loadingComponent: 在组件加载过程中渲染的组件。
• errorComponent: 如果加载组件失败，则渲染此组件。
• delay:在显示加载组件之前的延迟时间（毫秒）。
• timeout: 如果加载组件的时间超过这个时间，则显示错误组件（毫秒）。

注意事项

• 异步组件对于提高应用的加载速度和性能非常有用，但是需要注意管理它们的加载状态和错误处理。
• 在使用异步组件时，考虑到组件的加载时间，可能需要为用户提供一些反馈，比如加载指示器。
• 使用 defineAsyncComponent 时，确保正确处理错误情况，避免应用崩溃。