Vue3中Vue.extend()的替代方案：Options API迁移求助

原Vue2代码通过Vue.extend创建组件构造器并实例化，Vue3中Vue.extend已被移除，针对Options API场景，可通过createVNode+render实现相同逻辑，具体代码如下：

import { defineComponent, createVNode, render } from 'vue'

// 1. 用defineComponent包裹原Options API组件（若已包裹可跳过）
const TargetComponent = defineComponent(extendComponent)

// 2. 创建组件虚拟节点，传入初始化数据（建议组件改为props接收以下参数，更符合Vue3规范）
const vnode = createVNode(TargetComponent, {
  obj: data,
  toolkit: toolkit,
  surface: surface,
  vertex: node
})

// 3. 指定父组件实例，对应原代码的parent配置
vnode.parent = parentComponent._vnode

// 4. 创建临时容器用于挂载组件
const tempContainer = document.createElement('div')

// 5. 渲染虚拟节点到容器，完成组件实例化与挂载
render(vnode, tempContainer)

// 6. 获取组件实例与挂载后的DOM元素
const instance = vnode.component
const el = tempContainer.firstElementChild

// 7. 保留原逻辑的_ref绑定
el._ref = instance

// 返回DOM元素给第三方库
return el

关键说明： #

• 若原组件未使用defineComponent包裹，必须先执行包裹操作，否则Vue3无法正确识别Options API结构。
• 建议将原代码中传入data的变量改为组件的props接收，这是Vue3的推荐写法；若坚持要放入组件的data中，可在实例化后通过instance.data.obj = data的方式赋值（需确保组件data中已声明对应属性）。
• 父组件关联通过设置vnode.parent为父组件的虚拟节点（parentComponent._vnode），对应原Vue2的parent配置。

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