Vue2 插件迁移到 Vue3 的核心要点

Composition API 替代 Options API
Vue3 推荐使用 Composition API 替代 Vue2 的 Options API。插件逻辑需重构为 setup() 函数或独立的 composable 函数。例如，原本在 mounted 钩子中的逻辑可迁移到 onMounted 生命周期钩子中。

全局 API 变更
Vue3 的全局 API 通过 createApp 创建应用实例，而非直接修改 Vue.prototype。插件安装需调整为：

// Vue2
Vue.use(MyPlugin)

// Vue3
const app = createApp(App)
app.use(MyPlugin)

事件总线替换
Vue3 移除了 $on 和 $off 方法，推荐使用 mitt 或 tiny-emitter 等第三方库实现事件通信。

组件差异与适配策略

Fragment 和 Teleport 支持
Vue3 支持多根节点组件（Fragment）和跨 DOM 渲染（Teleport）。插件若依赖单根节点限制，需检查逻辑兼容性。

v-model 升级
Vue3 的 v-model 可绑定多个属性，默认使用 modelValue 替代 Vue2 的 value。插件若涉及表单控件，需调整 props 和事件命名：

// Vue2
model: {
  prop: 'value',
  event: 'input'
}

// Vue3
props: ['modelValue'],
emits: ['update:modelValue']

异步组件定义变更
Vue3 使用 defineAsyncComponent 定义异步组件，替代 Vue2 的 import() 动态加载语法。

生命周期映射与调整

• beforeDestroy → beforeUnmount
• destroyed → unmounted
  插件若依赖生命周期钩子，需更新钩子名称并验证时序是否变化。

响应式系统升级

Proxy 替代 defineProperty
Vue3 使用 Proxy 实现响应式，插件若依赖 Vue2 的响应式限制（如数组索引修改检测），需改用 ref 或 reactive。

手动触发更新
移除 Vue.set 和 Vue.delete，直接操作响应式对象即可触发更新。

TypeScript 类型支持

Vue3 内置 TypeScript 类型定义。插件若需增强类型，应使用 defineComponent 包裹组件，并导出明确的接口类型。

示例：插件安装函数改造

// Vue2 插件
const MyPlugin = {
  install(Vue) {
    Vue.prototype.$myMethod = () => {...}
  }
}

// Vue3 插件
const MyPlugin = {
  install(app) {
    app.config.globalProperties.$myMethod = () => {...}
  }
}

测试与验证

DevTools 兼容性检查
确保插件行为在 Vue3 DevTools 中可正常调试。

向后兼容处理
若需同时支持 Vue2/Vue3，可通过条件判断区分 API 版本：

if (app.version.startsWith('2.')) {
  // Vue2 逻辑
} else {
  // Vue3 逻辑
}