Vue 3环境下原Vue2版本的手动实例化挂载组件代码失效，如何适配修复？

• Vue 2 环境下，vue-loader 编译单文件组件（SFC）时，默认导出的是 Vue 构造函数的扩展子类，直接通过new调用即可生成可操作的组件实例
• Vue 3 环境下，vue-loader 编译 SFC 后默认导出的是纯组件配置对象，不再是可直接实例化的构造类，因此原有new vueTemplate()的写法必然失效
• Vue 3 移除了原 Vue 2 全局挂载的实例原型能力，所有手动实例化、挂载组件的逻辑统一收敛到独立的createApp API 实现

1. 替换组件实例化核心逻辑 #

原有失效的实例化、赋值、挂载代码：

let vueTemplate: any = template;
let instance = new vueTemplate();

instance.$data.form.value = config.value;
instance.$data.onValueChanged = config.onValueChanged;
instance.$data.onEditModeExit = config.onEditModeExit;
instance.$data.rules = config.validationRules;

instance.$mount(config.element);

需要替换为基于createApp的实现逻辑，首先在初始化文件中引入Vue 3的核心API：

import { createApp, h } from 'vue'
import EditDateFieldTemplate from './edit-date-field.vue'

通过h函数把外部传入的配置映射为组件的初始props，完成挂载：

// 创建独立的Vue应用实例
const app = createApp({
  // 渲染导入的SFC组件，把外部配置传入组件
  render: () => h(EditDateFieldTemplate, {
    initialValue: config.value,
    onValueChanged: config.onValueChanged,
    onEditModeExit: config.onEditModeExit,
    validationRules: config.validationRules
  })
})
// 挂载到目标DOM节点，行为和Vue2的$mount完全对齐
const mountedInstance = app.mount(config.element)

2. 适配单文件组件内部的数据读取逻辑 #

原有Vue2环境下的组件是直接读取外部赋值的实例$data，现在需要把传入的props映射为组件内部原有的data结构，组件内部的业务逻辑代码完全不用修改即可兼容：

<!-- edit-date-field.vue 适配部分 -->
<script>
export default {
  // 声明接收外部传入的参数
  props: {
    initialValue: { type: [String, Date], default: '' },
    onValueChanged: { type: Function, default: () => {} },
    onEditModeExit: { type: Function, default: () => {} },
    validationRules: { type: Object, default: () => ({}) }
  },
  data() {
    return {
      // 用传入的初始值初始化原表单数据结构
      form: { value: this.initialValue },
      // 把传入的方法、规则同步到内部data，保持原组件的调用方式
      onValueChanged: this.onValueChanged,
      onEditModeExit: this.onEditModeExit,
      rules: this.validationRules
    }
  }
}
</script>

3. 静态初始化类的完整适配实现 #

把原有初始化类的逻辑替换为如下版本，既保持原有的静态调用方式，又兼容Vue3的运行逻辑：

export default class EditDateFieldInitializer {
  // 入参做兼容处理，适配原有的多参数调用形式，无需修改全量业务调用代码
  public static InitEditDateField(
    elementOrConfig: HTMLElement | {
      element: HTMLElement
      value: string | Date
      onValueChanged: (val: string | Date) => void
      onEditModeExit: () => void
      validationRules?: Record<string, any>
    },
    date?: string | Date,
    dateChangedCallback?: (val: string | Date) => void,
    onEditModeExit?: () => void,
    validationRules: Record<string, any> = {}
  ) {
    // 把入参归一化为统一的配置结构
    const config = elementOrConfig instanceof HTMLElement
      ? {
          element: elementOrConfig,
          value: date!,
          onValueChanged: dateChangedCallback!,
          onEditModeExit: onEditModeExit!,
          validationRules
        }
      : elementOrConfig

    const app = createApp({
      render: () => h(EditDateFieldTemplate, {
        initialValue: config.value,
        onValueChanged: config.onValueChanged,
        onEditModeExit: config.onEditModeExit,
        validationRules: config.validationRules
      })
    })
    const componentInstance = app.mount(config.element)

    // 返回可操作的实例引用，替代原Vue2的实例返回值
    return {
      // 替代原Vue2的$destroy方法，做组件销毁释放
      unmount: () => app.unmount(),
      componentInstance
    }
  }
}

4. 业务调用层兼容说明 #

原有业务侧的调用代码无需做任何修改，即可正常运行：

EditDateFieldInitializer.InitEditDateField(element, date, dateChangedCallback, onEditModeExit);

• Vue 3 中通过createApp挂载的独立应用，不会自动随DOM节点移除而销毁，在业务逻辑触发组件移除、页面跳转时，必须手动调用返回值中的unmount方法释放事件监听，避免内存泄漏
• 不要尝试在挂载完成后直接修改根实例的$data，Vue3的实例数据代理机制下，外部直接修改$data不会触发视图更新，所有初始值必须在h函数渲染阶段通过props传入
• 如果原SFC是<script setup>语法编写，只需要在代码中通过defineProps声明上述四个入参，后续内部逻辑完全不需要调整即可适配

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