Vue3 全局 API

Vue2 把全局能力挂在唯一的 Vue 对象上，多个应用容易互相干扰。Vue3 引入「应用实例」概念：createApp 创建应用后，组件、指令、插件、配置都注册在这个实例上，同一页面可以并存多个互不影响的 Vue 应用，结构更清晰。

createApp 创建应用

一切从 createApp 开始：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)   // 创建应用实例
app.mount('#app')            // 挂载到页面节点

需要第二个独立应用时再 createApp 一次即可，两者互不干扰。

注册全局组件与指令

app.component 注册全局组件，app.directive 注册全局指令：

import MyButton from './components/MyButton.vue'

app.component('my-button', MyButton)   // 全局注册组件
app.directive('focus', {               // 全局注册指令
  mounted(el) {
    el.focus()
  },
})

之后任何组件的模板中都能直接使用：

<my-button>确定</my-button>
<input v-focus />

页面加载后输入框自动聚焦，说明全局指令已生效。

安装插件 app.use

路由、状态管理等第三方能力以插件形式接入应用：

import { createPinia } from 'pinia'
import router from './router'

app.use(createPinia())   // 安装状态管理
app.use(router)          // 安装路由

app.use 内部会调用插件的 install 方法，把应用实例交给插件。

全局依赖注入 app.provide

用 provide 给整棵组件树提供公共数据：

app.provide('config', { baseURL: '/api', timeout: 5000 })

任意后代组件通过 inject 即可获得：

import { inject } from 'vue'

const config = inject('config')
console.log(config.baseURL)   // 输出：/api

全局配置与属性

app.config.globalProperties 能为所有组件注入公共方法：

app.config.globalProperties.$now = () => new Date().toLocaleString()

选项式组件中通过 this 调用：

export default {
  mounted() {
    console.log(this.$now())   // 输出：2025/6/1 10:30:00 之类的时间串
  },
}

小结

Vue3 把 Vue2 中 Vue.component、Vue.use 等全局方法收敛到应用实例上，注册什么、装哪些插件都由开发者按需决定，互不污染。创建应用、安装插件、配置全局属性，就是日常最常用的三件事。