标准答案

  1. Vue 2 常见写法是 Vue.use、Vue.component、Vue.directive、Vue.prototype,这些修改会影响同一个 Vue 构造函数下的全局行为。
  2. Vue 3 使用 createApp(App) 创建应用实例,再通过 app.use、app.component、app.directive、app.config.globalProperties 注册能力。
  3. 应用实例化后,不同 app 可以有不同插件、全局组件、指令和配置,更适合微前端、多入口或测试隔离。
  4. Vue 3 中很多全局 API 被调整或移除,迁移时要检查插件安装方式、原型挂载和全局混入。
  5. 全局注册越多,越容易隐藏依赖。即使 Vue 3 支持 app 级注册,也应该控制全局能力的数量。

题目解析

createApp 的价值在于隔离应用上下文,而不是单纯把 new Vue 改成一个新函数。

插件迁移时要关注 install(app) 的签名、全局属性访问方式,以及组件库是否支持 Vue 3。

Vue 2 老项目里常见的 Vue.prototype.$api、$bus、$filters,迁移时通常要改为 provide/inject、composable 或 app.config.globalProperties 的少量保留。

代码示例

下面是 Vue 2 全局注册和 Vue 3 应用实例注册的对比。

TypeScript
// Vue 2
Vue.use(router)
Vue.component('BaseButton', BaseButton)
Vue.prototype.$api = api
TypeScript
// Vue 3
const app = createApp(App)

app.use(router)
app.component('BaseButton', BaseButton)
app.config.globalProperties.$api = api

app.mount('#app')

常见误区

  • 只把 new Vue 改成 createApp,没有检查插件、原型属性和全局 mixin 的迁移风险。
  • 在 Vue 3 中继续大量挂 globalProperties,让组件依赖来源不清楚。
  • 多个应用入口复用同一批全局副作用,导致测试和局部挂载互相污染。

作者信息