Vue 3 提供了许多 全局 API，这些 API 允许你在应用程序的全局范围内访问和控制 Vue 相关的功能。这些 API 提供了更简洁的方式来管理 Vue 实例、生命周期、插件以及全局配置等。

1. createApp()

createApp() 是 Vue 3 中创建应用实例的入口，它替代了 Vue 2 中的 new Vue()。此方法返回一个应用实例，你可以在该实例上注册组件、插件、配置等。

示例：

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

createApp(App).mount('#app')
  • createApp() 方法接收一个根组件，返回一个应用实例。
  • 你可以在应用实例上使用 .use() 来安装插件，.component() 来注册全局组件等。

2. app.component()

app.component() 用于注册全局组件，它可以在应用的任何地方被引用，而不需要逐个导入。

示例：

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

const app = createApp(App)
app.component('MyComponent', MyComponent)
app.mount('#app')

3. app.config.globalProperties

globalProperties 是 Vue 3 中用来在整个应用中共享一些全局属性的方法。这些属性可以是你想在各个组件中访问的常量、方法、对象等。

示例：

const app = createApp(App)
app.config.globalProperties.$myGlobalMethod = () => {
  console.log('This is a global method!')
}
app.mount('#app')

然后在任何组件中都可以通过 this.$myGlobalMethod() 访问该全局方法。

4. app.use()

app.use() 用来安装插件。插件可以是第三方插件，也可以是你自己编写的插件。安装插件之后，你可以在应用的所有组件中使用插件提供的功能。

示例：

import { createApp } from 'vue'
import App from './App.vue'
import SomePlugin from 'some-plugin'

const app = createApp(App)
app.use(SomePlugin)
app.mount('#app')

5. app.mixin()

app.mixin() 用于全局混入，在所有组件中都能使用定义的生命周期钩子和数据。

示例：

const app = createApp(App)
app.mixin({
  created() {
    console.log('Global mixin: component created!')
  }
})
app.mount('#app')
  • 这个全局混入会在每个组件的 created() 生命周期钩子中执行。

6. app.directive()

app.directive() 用于注册全局自定义指令。自定义指令允许你在模板中直接操作 DOM 元素。

示例：

const app = createApp(App)

app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

app.mount('#app')
  • 这里注册了一个 focus 指令，每当指令绑定的元素被插入 DOM 后，会自动获取焦点。

7. app.provide() 和 app.inject()

provide() 和 inject() 是 Vue 3 中用于跨组件共享数据的方法。provide() 是在父组件中提供数据，inject() 是在子组件中注入数据。

示例：

// 在父组件中提供数据
const app = createApp(App)
app.provide('message', 'Hello from parent!')
app.mount('#app')

// 在子组件中注入数据
const ChildComponent = {
  inject: ['message'],
  template: '<div>{{ message }}</div>',
}

8. app.config.errorHandler

app.config.errorHandler 用于全局捕获 Vue 应用中的错误。如果发生错误，Vue 会调用这个全局错误处理函数。

示例：

const app = createApp(App)

app.config.errorHandler = (err, instance, info) => {
  console.error('Global error handler:', err)
}

app.mount('#app')

9. app.config.warnHandler

warnHandler 用于全局捕获 Vue 应用中的警告信息。你可以使用这个配置来监听 Vue 报告的警告，并做一些自定义处理。

示例：

const app = createApp(App)

app.config.warnHandler = (msg, vm, trace) => {
  console.warn('Global warning handler:', msg)
}

app.mount('#app')

10. app.component()

app.component() 用于注册全局组件。这样，在任何组件中都可以直接使用这些注册的全局组件，而不需要每次都导入。

示例：

const app = createApp(App)
app.component('MyComponent', MyComponent)
app.mount('#app')

11. app.use() 安装插件

app.use() 用于安装第三方插件。例如，使用 Vue Router 或 Vuex 时，通常会使用这个 API。

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

const app = createApp(App)
app.use(router)
app.mount('#app')

12. app.mount()

app.mount() 用来将 Vue 应用挂载到 DOM 上，它接受一个 CSS 选择器作为参数，通常是一个 #id 或 .class。

示例：

const app = createApp(App)
app.mount('#app')

总结

Vue 3 提供了多种 全局 API，它们可以帮助你在应用级别上处理一些通用的操作，如：

  • 创建和挂载应用（createApp() 和 mount()）
  • 注册全局组件和指令（component() 和 directive()）
  • 全局状态管理和方法（globalProperties）
  • 插件和自定义配置（use()、provide()、inject()）

这些 API 使得你可以更灵活地控制和定制应用的行为，并能够更高效地构建 Vue 应用。