Vue2 与 Vue3 插件开发的核心差异

Vue2 插件结构
Vue2 插件通常暴露一个 install 方法，通过 Vue.use() 注册。插件内部通过 Vue.prototype 扩展全局方法或属性，依赖选项式 API 的生命周期钩子。

// Vue2 插件示例
const MyPlugin = {
  install(Vue, options) {
    Vue.prototype.$myMethod = () => { ... };
    Vue.directive('my-directive', { ... });
    Vue.mixin({ ... });
  }
};
Vue.use(MyPlugin);

Vue3 插件结构
Vue3 插件仍使用 install 方法，但接收 app 实例（由 createApp() 创建）而非 Vue 构造函数。通过 app.config.globalProperties 扩展全局属性，支持组合式 API。

// Vue3 插件示例
const MyPlugin = {
  install(app, options) {
    app.config.globalProperties.$myMethod = () => { ... };
    app.directive('my-directive', { ... });
    app.mixin({ ... });
  }
};
const app = createApp(App);
app.use(MyPlugin);

主要技术差异点

1. 全局属性扩展方式
Vue2 通过 Vue.prototype 添加的属性在所有组件中通过 this 访问。Vue3 改为 app.config.globalProperties，需注意组合式 API 中需通过 getCurrentInstance() 获取。

2. 生命周期钩子变化
Vue3 移除 beforeCreate 和 created（由 setup() 替代），其他钩子名称变更（如 mounted → onMounted）。插件若依赖钩子需适配新命名。

3. 响应式系统重构
Vue3 使用 reactive/ref 替代 Vue2 的 Vue.observable()。插件若涉及响应式数据，需改用新 API。

4. 类型支持增强
Vue3 基于 TypeScript 开发，插件可提供更完善的类型定义。Vue2 插件需额外 @types 包支持类型。

迁移注意事项

代码兼容性
Vue3 提供兼容模式（@vue/compat）临时支持 Vue2 插件，但长期需重构。

Tree-shaking 优化
Vue3 插件可利用 ES Module 静态结构实现按需加载，避免 Vue2 的全量引入问题。

组合式 API 集成
推荐为 Vue3 插件提供 useXxx 的 Composition 函数，替代全局属性污染。例如：

// Vue3 插件提供 Composition API
export function useMyPlugin() {
  const { proxy } = getCurrentInstance();
  return { ...proxy.$myPlugin };
}

典型场景对比

路由插件
Vue2 的 VueRouter 通过 Vue.use() 注册，路由实例挂载到根组件。Vue3 的 vue-router@4 需通过 app.use() 注册，且路由守卫 API 变更。

状态管理插件
Vuex@3 依赖 Vue.prototype.$store，Vuex@4 或 Pinia 改用 app.provide()/inject() 共享状态，更适配组合式 API。