Vue3插件迁移：如何在已有应用实例上挂载组件

在Vue3中，要让插件挂载的组件复用主应用的全局资源，不能用createApp创建新实例，而是要借助主应用实例的createVNode和render方法，让组件在主应用的上下文环境中渲染。

修正后的插件代码 #

import { createVNode, render } from 'vue'
import Component from './YourComponent.vue' // 替换成你的组件实际路径

export default {
  install (app) {
    // 创建组件的虚拟节点
    const vnode = createVNode(Component)
    // 绑定主应用的上下文，让组件能访问全局资源
    vnode.appContext = app._context

    // 创建容器并插入到body
    const container = document.createElement('div')
    document.body.appendChild(container)

    // 将组件渲染到容器中
    render(vnode, container)
  }
}

关键说明 #

• 共享主应用上下文：通过vnode.appContext = app._context，让组件继承主应用的全局组件、指令、全局属性等资源，和Vue2中Vue.extend的效果完全一致。
• 避免独立应用实例：不再用createApp创建全新的应用环境，而是直接复用主应用的渲染能力，确保组件和主应用处于同一个上下文。
• 保持编程式挂载灵活性：依然通过代码完全控制组件的渲染和挂载位置，不需要手动插入模板，符合你的需求。

如果后续需要卸载组件，还可以保存vnode.component实例，调用render(null, container)来完成销毁操作。

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