Vue3中Vue.extend().$mount()替代方案求助（Vuetify弹窗场景）

针对你遇到的「[Vuetify] Could not find defaults instance」错误，核心原因是动态创建的组件没有继承到包含Vuetify上下文的appContext。以下是适配Options API和Composition API的可行方案：

一、封装通用动态挂载工具函数 #

先封装可复用的挂载函数，负责传递上下文、创建DOM容器和处理卸载：

import { createVNode, render } from 'vue'

export function mountDynamicComponent(Component, props = {}, appContext) {
  const vNode = createVNode(Component, props)
  // 传递appContext，确保Vuetify全局上下文被继承
  vNode.appContext = appContext

  const container = document.createElement('div')
  render(vNode, container)

  const componentInstance = vNode.component
  const unmount = () => {
    render(null, container)
    document.body.removeChild(container)
  }

  return {
    instance: componentInstance,
    unmount,
    el: container.firstElementChild
  }
}

二、在Options API组件中使用 #

直接通过this.$root.appContext获取根实例的上下文（包含Vuetify插件的所有配置），传递给挂载函数：

import mountDynamicComponent from '@/utils/mountDynamicComponent'
import YourDialogComponent from '@/components/YourDialogComponent.vue'

export default {
  methods: {
    openDynamicDialog() {
      const { unmount, el } = mountDynamicComponent(
        YourDialogComponent,
        {
          title: '动态弹窗示例',
          modelValue: true,
          'onUpdate:modelValue': (value) => {
            if (!value) unmount()
          }
        },
        this.$root.appContext // 关键：传递根上下文
      )
      document.body.appendChild(el)
    }
  }
}

三、在Composition API组件中使用 #

通过getCurrentInstance获取当前组件的appContext（需在setup或生命周期钩子内调用）：

import { getCurrentInstance } from 'vue'
import mountDynamicComponent from '@/utils/mountDynamicComponent'
import YourDialogComponent from '@/components/YourDialogComponent.vue'

export default {
  setup() {
    const currentInstance = getCurrentInstance()

    const openDynamicDialog = () => {
      const { unmount, el } = mountDynamicComponent(
        YourDialogComponent,
        {
          title: 'Composition API弹窗',
          modelValue: true,
          'onUpdate:modelValue': (value) => !value && unmount()
        },
        currentInstance.appContext
      )
      document.body.appendChild(el)
    }

    return { openDynamicDialog }
  }
}

关键注意事项 #

• 必须传递包含Vuetify上下文的appContext，否则动态组件无法访问$vuetify和Vuetify全局配置。
• 卸载时务必调用unmount方法清理DOM和组件实例，避免内存泄漏。
• 弹窗组件无论使用Options API还是Composition API，只要上下文传递正确，都能正常运行，适配渐进式迁移需求。

内容的提问来源于stack exchange，提问作者ScottR