Vue3.0中对Vue2.0全局API extend 的替代方案

今天在做一个原本使用2.0的 extend 全局API 来实现的功能时，浏览器却提示 extend 不是一个函数，查了官方文档才知道这个已经被废除了：

但实际createApp是用来创建应用实例的，这样做会丢失上下文，实际尝试了一下确实也能渲染出组件但上下文丢失了就比较麻烦了。

重新寻找方案的时候在vue的issue中发现有人在讨论着这个问题：

ISSUEhttps://github.com/vuejs/vue-next/issues/2097

VUE作者也参与了问答，根据里面几个哥们的说法，我们重新实现一下：

// 需要使用createVNode和render方法
import {createVNode, render} from "vue"
// 需要引用的组件，这个根据自己的需求来引用
import VueComponent from './VueComponent'

// 由于render方法需要挂载到一个已经存在的节点上，我不太想在页面放置这些节点，就使用JS来生成，如果页面中已经有节点了，这里直接穿对应节点就可以了
let node = document.getElementById('my-node')
if(!node) {
    node = document.createElement('div', {id: 'my-node'})
}

// 接下来就调用方法
// 第一个参数传入一个VUE组件，第二个参数传入组件中的props或者事件
// 子组件 $emit 出来的事件也是通过第二个参数来注入监听，前面需要添加 "on" 
// 比如子组件 $emit("create") 时，这里就要传入 “onCreate” 来监听
let instance = createVNode(VueComponent, {
    name: 'v神',
    onCreate: (event) => {
        console.log(event)
    }
})
// 这句话比较重要，将原本应用程序的上下文覆盖过来
// 这里用到的app就是在入口文件里通过createApp方法创建的应用程序实例
instance.appContext = app._context

// 使用render方法渲染组件
render(instance, node)

console.log(instance)

// 返回HTML
return instance.el

 这么写起来始终感觉不是很优雅的样子，不知道还有没有其它办法