Vue2和Vue3挂载组件的方式

1.vue2

import Vue from "vue";
import Popup from "./index.vue";

const PopupBox = Vue.extend(Popup);

export default function() {
    const instance = new PopupBox().$mount();
    document.body.appendChild(instance.$el);
    return instance; // 返回挂载的实例
}

Vue.extend( options )

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

<div id="mount-point"></div>

// 创建构造器
var Profile = Vue.extend({
    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
    data: function () {
        return {
            firstName: 'Walter',
            lastName: 'White',
            alias: 'Heisenberg'
        }
    }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

extend 创建的是 Vue 构造器，而不是我们平时常写的组件实例，所以不可以通过 new Vue({ components: testExtend }) 来直接使用，需要通过 new Profile().$mount('#mount-point') 来挂载到指定的元素上。
extend提供了一个能够构造组件的函数（也就是构造器）。在一些特定的应用场景（如自己构建一个复杂弹窗）下，我们使用这种函数式的构造组件的方法，会更灵活一些。

2.vue3 

import { createApp } from "vue";
import Popup from "./index.vue";

export default function(options = {}) {
    const app = createApp(Popup, {
        ...options,
        close: () => {
            app.unmount();
            document.body.removeChild(mountNode);
            /* 组件移除时取消挂载 */
        } // 传入组件的props
    });
    
    const mountNode = document.createElement("div");
    document.body.appendChild(mountNode);

    const instance = app.mount(mountNode);
    return instance; // 返回挂载的实例
}

createApp()

创建一个应用实例。

function createApp(rootComponent: Component, rootProps?: object): App

第一个参数是根组件。第二个参数可选，它是要传递给根组件的 props。