vue.use和app.use

一、核心定义与应用场景

1. Vue.use（Vue 2 时代的用法）

• 作用：在 Vue 2 中注册全局插件，通过操作 Vue 构造函数实现功能扩展（如注册组件、挂载原型方法）。
• 场景：适用于 Vue 2 项目，在创建实例前调用（如 Vue.use(VueRouter)）。

2. app.use（Vue 3 组合式 API 用法）

• 作用：在 Vue 3 中通过应用实例 app 注册插件，替代 Vue 2 中对全局 Vue 构造函数的直接操作。
• 场景：适用于 Vue 3 项目，在创建应用实例后调用（如 app.use(router)）。

二、底层实现与流程对比

1. Vue.use（Vue 2 源码简化）

// Vue 2 中 Vue.use 核心逻辑
Vue.use = function (plugin) {
  // 防止重复注册
  if (this._installedPlugins.includes(plugin)) return this
  
  // 处理参数并调用 install 方法
  const args = [this, ...toArray(arguments, 1)]
  if (plugin.install) plugin.install.apply(plugin, args)
  else if (typeof plugin === 'function') plugin.apply(null, args)
  
  this._installedPlugins.push(plugin)
  return this
}

特点：直接修改全局 Vue 构造函数，影响所有后续创建的实例。

2. app.use（Vue 3 源码简化）

// Vue 3 中 app.use 核心逻辑
app.use = function (plugin, options) {
  // 防止重复注册
  if (this._plugins.has(plugin)) return this
  
  // 处理参数并调用 install 方法
  const args = [this, options]
  if (plugin.install) plugin.install.apply(plugin, args)
  else if (typeof plugin === 'function') plugin.apply(null, args)
  
  this._plugins.add(plugin)
  return this
}

特点：基于应用实例 app 注册插件，每个实例的插件相互隔离（如多应用场景）。

三、使用方式对比（以路由插件为例）

1. Vue 2 写法

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

// 注册插件到全局 Vue 构造函数
Vue.use(VueRouter)

// 创建路由实例
const router = new VueRouter(...)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

2. Vue 3 写法

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 创建应用实例
const app = createApp(App)

// 注册插件到应用实例
app.use(router)

// 挂载应用
app.mount('#app')

四、核心差异点总结（面试高频考点）

维度	Vue.use（Vue 2）	app.use（Vue 3）
操作对象	全局 Vue 构造函数	应用实例 app（通过 createApp 创建）
作用范围	所有 Vue 实例共享插件（全局污染风险）	插件仅作用于当前应用实例（支持多实例隔离）
设计理念	面向类的编程（Class-based）	组合式 API（Composition API）
插件参数	第一个参数为 Vue 构造函数	第一个参数为 app 实例
重复注册	通过 _installedPlugins 数组校验	通过 _plugins Set 数据结构校验

五、问题

1. 问：Vue 3 为什么用 app.use 替代 Vue.use？

• 避免全局污染：Vue 2 中 Vue.use 直接修改全局构造函数，可能导致多应用场景下的冲突（如微前端）；
• 符合组合式设计：Vue 3 的 app.use 基于实例隔离，每个应用可独立管理插件（如不同路由配置）；
• 性能优化：实例级插件注册可减少全局状态耦合，更适合大型项目的按需加载。

2. 问：插件在 Vue 2 和 Vue 3 中是否兼容？

• 基础兼容：若插件遵循 install(Vue, options) 规范，在 Vue 3 中需调整参数：
  • Vue 2 中 install 第一个参数是 Vue 构造函数；
  • Vue 3 中第一个参数是 app 实例（包含 component、directive 等方法）。
• 高阶兼容：涉及全局状态（如 Vue.prototype）的插件需重构，推荐使用 app.config.globalProperties 替代（Vue 3 特性）。

3. 问：如何在 Vue 3 中开发兼容两种版本的插件？

// 兼容 Vue 2 和 Vue 3 的插件示例
const CompatPlugin = {
  install(target, options) {
    // target 在 Vue 2 中是 Vue 构造函数，在 Vue 3 中是 app 实例
    const isVue3 = target.config !== undefined
    
    // 注册全局组件（兼容写法）
    if (isVue3) {
      target.component('CompatComponent', { /* ... */ })
    } else {
      target.component('CompatComponent', { /* ... */ })
    }
    
    // 挂载全局方法（兼容写法）
    if (isVue3) {
      target.config.globalProperties.$compat = { /* ... */ }
    } else {
      target.prototype.$compat = { /* ... */ }
    }
  }
}

// 使用方式
// Vue 2: Vue.use(CompatPlugin)
// Vue 3: app.use(CompatPlugin)