Vue 3 全局 API 变更解析：从 Vue 2 迁移到 Vue 3 的兼容指南

快速概述

Vue 3 对全局 API 进行了重大调整，核心变化是将 Vue 2 中挂载在 Vue 构造函数上的静态方法（如 Vue.component、Vue.directive、Vue.mixin）迁移为通过 createApp() 创建的应用实例的方法。这一变更解决了 Vue 2 中多个应用实例共享同一全局配置导致的状态污染问题，使应用隔离性更强。适用场景包括新项目初始化、旧项目升级以及微前端架构。前置环境要求：Node.js 16+ 与 Vue 3.x 脚手架（Vite 或 Vue CLI）。

核心概念与原理

Vue 3 采用显式应用实例设计模式：createApp() 返回独立的应用对象，所有全局配置（组件、指令、混入、插件）均挂载在该实例上。这与 Vue 2 的全局单例模式截然不同——Vue 2 中任何 Vue.mixin() 调用都会影响所有 Vue 实例，而 Vue 3 中每个应用实例拥有独立的上下文，互不干扰。同时，Vue.nextTick()、Vue.observable() 等工具方法被重构为具名导出，需按需引入，这契合了渐进式框架按需引入的特性，减少了打包体积。

实战步骤与代码

步骤 1：创建应用实例

// Vue 2 写法
const app = new Vue({ /* 选项 */ })
// Vue 3 写法 import { createApp } from 'vue' const app = createApp({ /* 根组件选项 */ }) // 创建独立应用实例 app.mount('#app') // 挂载到 DOM

步骤 2：全局组件注册迁移

// Vue 2：Vue.component('my-component', MyComponent)
// Vue 3：
import MyComponent from './MyComponent.vue'
const app = createApp(App)
app.component('my-component', MyComponent) // 注册到当前应用实例
app.mount('#app')

步骤 3：全局指令与混入

// Vue 2：Vue.directive('focus', {...})
// Vue 3：
app.directive('focus', { mounted(el) { el.focus() } }) // 指令注册
// Vue 2：Vue.mixin({...}) // Vue 3： app.mixin({ created() { console.log('全局混入') } }) // 混入注册

步骤 4：工具方法按需导入

// Vue 2：Vue.nextTick(() => {...})
// Vue 3：
import { nextTick } from 'vue'
nextTick(() => { /* DOM 更新后执行 */ })
// Vue 2：Vue.observable(obj) // Vue 3： import { reactive } from 'vue' const state = reactive({ count: 0 }) // 替代 observable

步骤 5：插件安装

// Vue 2：Vue.use(Router)
// Vue 3：
import { createRouter } from 'vue-router'
const router = createRouter({ /* 路由配置 */ })
app.use(router) // 插件安装到应用实例
app.mount('#app')

常见坑点与优化

• 坑点 1：直接使用 Vue.component() 会报错——Vue 3 中 Vue 不再是构造函数，必须通过 app.component() 注册。迁移时需全局搜索替换。
• 坑点 2：Vue.prototype.$http 等原型属性失效，应改用 app.config.globalProperties.$http = ... 实现全局属性注入。
• 坑点 3：多个应用实例共享配置时，务必为每个 createApp() 单独注册组件与插件，避免交叉污染。
• 优化建议：使用 app.config.performance = true 开启性能追踪；利用 Tree-shaking 按需导入 API（如 nextTick、reactive），显著减小打包体积。