选项1：createVNode(component, props)和render(vnode, container)

**创建：**使用createVNode()来创建具有props的组件定义的VNode（例如，从*.vue导入的SFC），其可以被传递到render()以在给定容器元素上呈现它。
**销毁：**调用render(null, container)将销毁附加到容器的VNode。在父组件卸载时（通过unmounted生命周期挂接），应将此调用作为清理。

// renderComponent.js
import { createVNode, render } from 'vue'
export default function renderComponent({ el, component, props, appContext }) {
  let vnode = createVNode(component, props)
  vnode.appContext = { ...appContext }
  render(vnode, el)
  return () => {
    // destroy vnode
    render(null, el)
    vnode = undefined
  }
}

**警告：**此方法依赖于内部方法（createVNode和render），在未来版本中可能会重构或删除这些方法。

demo 1

选项2：createApp(component, props)和app.mount(container)

**正在创建：**使用createApp()，它返回一个应用程序示例。该示例具有mount()，可用于呈现给定容器元素上的组件。
**销毁：**应用程序示例具有unmount()以销毁应用程序和组件示例。在父组件卸载时（通过unmounted生命周期挂接），应将此调用为清理。

// renderComponent.js
import { createApp } from 'vue'
export default function renderComponent({ el, component, props, appContext }) {
  let app = createApp(component, props)
  Object.assign(app._context, appContext) // must use Object.assign on _context
  app.mount(el)
  return () => {
    // destroy app/component
    app?.unmount()
    app = undefined
  }
}

**警告：**这种方法为每个组件创建一个应用程序示例，如果需要在文档中同时示例化许多组件，那么这可能会带来不小的开销。

demo 2

用法示例

<script setup>
import { ref, onUnmounted, getCurrentInstance } from 'vue'
import renderComponent from './renderComponent'
const { appContext } = getCurrentInstance()
const container = ref()
let counter = 1
let destroyComp = null
onUnmounted(() => destroyComp?.())
const insert = async () => {
  destroyComp?.()
  destroyComp = renderComponent({
    el: container.value,
    component: (await import('@/components/HelloWorld.vue')).default
    props: {
      key: counter,
      msg: 'Message ' + counter++,
    },
    appContext,
  })
}
</script>
<template>
  <button @click="insert">Insert component</button>
  <div ref="container"></div>
</template>

更简单的方法是使用v-if或v-for。
与直接处理组件不同，您可以处理组件的状态，并让VueReact性发挥作用
下面是一个动态附加组件（吐司）的示例，同时只操作组件的状态

吐司.vue文件：v-for在这里是被动的，每当一个新的错误被添加到错误的对象中时，它就会被呈现

<script setup lang="ts">
import { watch } from 'vue';
import { ref, onUpdated } from 'vue';
import { Toast } from 'bootstrap';
const props = defineProps({
  errors: { type: Array, default: () => [] },
});
onUpdated(() => {
  const hiddenToasts = props.errors.filter((obj) => {
    return obj.show != true;
  });
  hiddenToasts.forEach(function (error) {
    var errorToast = document.getElementById(error.id);
    var toast = new Toast(errorToast);
    toast.show();
    error.show = true;
    errorToast.addEventListener('hidden.bs.toast', function () {
      const indexOfObject = props.errors.findIndex((item) => {
        return item.id === error.id;
      });
      if (indexOfObject !== -1) {
        props.errors.splice(indexOfObject, 1);
      }
    });
  });
});
</script>
<script lang="ts">
const TOASTS_MAX = 5;
export function push(array: Array, data): Array {
  if (array.length == TOASTS_MAX) {
    array.shift();
    array.push(data);
  } else {
    array.push(data);
  }
}
</script>
<template>
  <div
    ref="container"
    class="position-fixed bottom-0 end-0 p-3"
    style="z-index: 11"
  >
    <div
      v-for="item in errors"
      v-bind:id="item.id"
      class="toast fade opacity-75 bg-danger"
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
      data-bs-delay="15000"
    >
      <div class="toast-header bg-danger">
        <strong class="me-auto text-white">Error</strong>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="toast"
          aria-label="Close"
        ></button>
      </div>
      <div class="toast-body text-white error-body">{{ item.msg }}</div>
    </div>
  </div>
</template>

错误触发值：在这里，每当单击发生时，我们都会将错误推送到错误的对象

<script setup lang="ts">
import { ref, reactive } from 'vue';
import toast from './Toast.vue';
import { push } from './Toast.vue';
const count = ref(0);
const state = reactive({ errors: [] });
function pushError(id: int) {
  push(state.errors, { id: id, msg: 'Error message ' + id });
}
</script>
<template>
  <toast :errors="state.errors"></toast>
  <button type="button" @click="pushError('toast' + count++)">
    Error trigger: {{ count }}
  </button>
</template>

完整示例如下：https://stackblitz.com/edit/vitejs-vite-mcjgkl

mount-vue-component包提供了一个helper函数，该函数使用@tony19答案中的选项1。
一个警告：如果组件是在.vue文件中定义的，并且只是通过编程创建的，那么您可能需要导入并注册它，否则树抖动可能会删除它的模板，导致在生产时插入一个空组件（这个问题似乎主要影响Vue + Vite）。
例如：

import MyComponent from "./MyComponent.vue";
const app = createApp(App).use(router);
app.component("MyComponent", MyComponent);