Vue 3中如何以编程方式创建组件实例并调用其方法？

在Vue3中，Vue.extend已被移除，你可以通过以下几种方式实现原Vue2中创建组件实例并调用restoreData方法的需求：

方法一：创建临时组件实例（兼容原有组件逻辑） #

如果你的restoreData方法依赖组件实例的上下文（比如用到了组件的data、props或生命周期相关逻辑），可以通过createApp创建临时实例，调用方法后再清理资源：

import { createApp } from 'vue'
import WizardStep from "./WizardStep.vue"

// 创建临时DOM容器（用于挂载组件）
const tempContainer = document.createElement('div')
// 创建应用实例并挂载组件
const app = createApp(WizardStep)
const wizardStepInstance = app.mount(tempContainer)

// 调用恢复数据的方法
let myObject = {}
await wizardStepInstance.restoreData(myObject)

// 清理资源：卸载实例并移除临时容器
app.unmount()
document.body.removeChild(tempContainer)

你可以封装一个通用工具函数来处理多个步骤的调用，避免重复代码：

import { createApp } from 'vue'

/**
 * 调用组件指定方法并返回结果
 * @param {object} component - Vue组件选项
 * @param {string} methodName - 要调用的方法名
 * @param {any[]} args - 方法参数
 * @returns {Promise<any>} 方法执行结果
 */
async function callComponentMethod(component, methodName, ...args) {
  const tempContainer = document.createElement('div')
  const app = createApp(component)
  const instance = app.mount(tempContainer)
  
  const result = await instance[methodName](...args)
  
  // 清理资源
  app.unmount()
  document.body.removeChild(tempContainer)
  
  return result
}

// 调用示例：恢复Step1-Step3的数据
import Step1 from './Step1.vue'
import Step2 from './Step2.vue'
import Step3 from './Step3.vue'

let myObject = {}
await callComponentMethod(Step1, 'restoreData', myObject)
await callComponentMethod(Step2, 'restoreData', myObject)
await callComponentMethod(Step3, 'restoreData', myObject)

// 数据恢复完成后进入Step4

方法二：抽离独立工具函数（推荐） #

如果restoreData只是纯数据处理逻辑，不依赖组件实例上下文，建议将逻辑抽离为独立的工具函数，这样无需创建组件实例，效率更高：

1. 为每个步骤创建独立的恢复函数文件：

// step1-restore.js
export async function restoreStep1Data(dataObj) {
  // 原Step1组件中restoreData的具体逻辑
}

// step2-restore.js
export async function restoreStep2Data(dataObj) {
  // 原Step2组件中restoreData的具体逻辑
}

2. 在组件中引用这些函数：

// Step1.vue
import { restoreStep1Data } from './step1-restore.js'

export default {
  methods: {
    async restoreData(dataObj) {
      return await restoreStep1Data(dataObj)
    }
  }
}

3. 在外部直接调用工具函数恢复数据：

import { restoreStep1Data } from './step1-restore.js'
import { restoreStep2Data } from './step2-restore.js'
import { restoreStep3Data } from './step3-restore.js'

let myObject = {}
await restoreStep1Data(myObject)
await restoreStep2Data(myObject)
await restoreStep3Data(myObject)

// 进入Step4

这种方式不仅简化了调用逻辑，还让数据恢复逻辑与组件解耦，更易于维护和测试。

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