vue3全局挂载组件并获取$el,Vue.component代替api

这里提前声明的是 1 targetCopm是引入的组件 2 myProps则是我定义的options操作项

Vue.component()其实也就是对组件的一个挂载

Vue2中通过vue.extend生成了Vuecomponent构造函数,Vue.component（）内部还是调用了Vue.extend方法

Vuecomponent构造函数：
(1)VueComponent(options) 是一个构造函数,需要用new操作符才能调用

(2)组件本质是一个名为vuecomponent的构造函数,他是由Vue.extend()生成的

(3)我们只需要书写组件标签,vue解析时会 自动帮我们创建 => school组件的实例对象，vue 执行 new VueComponent(options) options是我们配置的配置对象,也会自动传入
!!(4)每次调用Vue.extend(),返回的是一个全新的vue.component()构造函数(对象)

Vue.component（）主要逻辑：

1. 判断是否传递了选项对象，如果没有，则会返回options.components对应的组件
2. 校验组件名是否符合要求，实际上判断是否非字母开头、是否是HTML标签、是否是SVG标签
3. 判断是否是创建组件并且选项是普通对象，
4. 组件名定义，如果每定义name，则会以id为name
5. 调用Vue.extend方法

解决方法：

1 使用createApp注册挂载组件

// 挂载函数
    const createMount = (opts) => {
      // 1.1 创建div
      const mountNode = document.createElement("div");
      // 1.2 把div元素append到body中
      document.body.appendChild(mountNode);
       //   1.3 调用createApp实现组件的引用
      const app = createApp(targetCopm, {
        ...opts,
      });
      //   1.4 将app挂载到第一步创建div
      return app.mount(mountNode);
    };
    // 调用挂载函数传入options操作项
    const mypop = createMount(myProps);
    popEl = mypop.$el;

第二种就更简单了，代码也少

2 使用createVNode | render 挂载

import { createVNode, render } from "vue";
    // createVNode创建实例
    const instance = createVNode(targetCopm, myProps);
    // 使用render将instance挂载到body上面
    render(instance, document.querySelector("body"));
    popEl = instance.el;