Vue3中是否存在等同Vue2通过new Vue()创建组件实例的方法？

Vue3 已移除 Vue2 中的 Vue.extend API，但针对脱离主应用上下文、无需挂载到DOM的组件实例化需求，有成熟的替代实现方案，原有基于Vue2的数据建模库可以低成本完成适配。

核心实现代码 #

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

// 1. 定义模型组件，和Vue2组件选项写法几乎完全兼容
const Person = defineComponent({
  name: 'Person',
  data() {
    return {
      name: '',
      age: 0
    }
  },
  computed: {
    intro() {
      return `我是${this.name}，今年${this.age}岁`
    }
  },
  methods: {
    growUp() {
      this.age++
    }
  }
})

// 2. 封装通用实例化方法，替代原有的 new 构造调用
function createComponentInstance(Component, props = {}) {
  // 创建虚拟节点，不会关联任何应用上下文
  const vnode = createVNode(Component, props)
  // 渲染到内存临时容器，不会产生真实页面DOM节点
  render(vnode, document.createElement('div'))
  // 返回组件实例，能力对齐Vue2 extend生成的实例
  return vnode.component.exposed || vnode.component.proxy
}

// 3. 调用示例，和原有使用逻辑对齐
const person = createComponentInstance(Person, {
  // 传入组件props参数
})

// 正常访问响应式状态、计算属性、方法，和Vue2实例行为完全一致
person.name = '张三'
console.log(person.intro) // 输出：我是张三，今年0岁
person.growUp()
console.log(person.age) // 输出：1

关键说明 #

• 方案无需调用createApp，不会和主应用上下文产生任何关联，满足独立实例化的需求
• 实例化过程仅在内存中运行，不会挂载到页面DOM树，无额外DOM开销
• Options API写法的组件可直接通过返回的实例访问所有data、computed、methods属性；如果使用<script setup>语法的组件，只需通过defineExpose导出需要对外暴露的状态和方法即可正常访问
• 如需销毁实例，执行render(null, vnode.el)即可，效果等价于Vue2的$destroy方法

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