Vue3 全局 API
直接回答
- Vue 3 的全局 API 主要通过
createApp创建应用实例，功能包括配置、组件注册和插件安装。 - 这些 API 比 Vue 2 更模块化，支持 Tree-shaking，减少打包体积。
- 主要 API 有
createApp、app.component、app.use等，适合管理全局设置。
什么是 Vue 3 全局 API？
Vue 3 的全局 API 是框架提供的一组方法和属性，用于在应用中进行全局配置，比如注册组件、安装插件或设置全局属性。这些 API 帮助开发者更方便地管理整个应用的设置。
主要功能和用法
- 创建应用实例：使用
createApp()创建一个独立的应用实例，例如const app = createApp(App)，然后通过app.mount('#app')挂载到 DOM。 - 注册全局组件：用
app.component('MyComponent', { template: '<div>全局组件</div>' })注册可全局使用的组件。 - 安装插件：通过
app.use(myPlugin)添加额外的功能。 - 全局配置：用
app.config.globalProperties.$message = '全局属性'设置所有组件可访问的属性。
与 Vue 2 的区别
Vue 3 将全局 API 转移到应用实例上，比如 Vue.component 变成 app.component，支持 Tree-shaking，减少打包体积。这对性能和代码组织有显著提升。
详细报告
Vue 3 的全局 API 是框架的核心部分，提供了在应用中进行全局配置、组件注册、插件安装等操作的方法和属性。以下是对 Vue 3 全局 API 的详细中文讲解，涵盖主要功能、用法和与 Vue 2 的对比，基于当前可访问的官方文档和权威资源，确保信息的准确性和可靠性。
核心概念与变化
Vue 3 的全局 API 相较于 Vue 2 发生了显著变化。Vue 2 使用一个全局 Vue 对象来管理配置（如 Vue.prototype、Vue.use），但这会导致一些问题，例如在单元测试中污染全局环境，以及在不同应用中共享不同配置的 Vue 对象变得困难。Vue 3 引入了 createApp 方法，用于创建独立的应用实例（app），所有原来在全局 Vue 对象上的操作（如配置、组件注册、插件安装）现在都转移到 app 实例上。这不仅解决了上述问题，还支持 Webpack 的 Tree-shaking，减少了打包体积。
Tree-shaking 是指通过具名导出（Name exports）实现未使用的 API 被优化器移除，进一步减小应用的体积。这使得 Vue 3 的全局 API 更加模块化和灵活，适合现代前端开发需求。
全局 API 列表
以下是 Vue 3 中主要的全局 API 和它们的用途，整理自权威教程资源：
| 序号 | API 名称 | 描述 |
|---|---|---|
| 1 | createApp() | 创建 Vue 应用实例，通常用于客户端渲染。 |
| 2 | createSSRApp() | 创建 Vue 应用实例，用于服务器端渲染（SSR）。 |
| 3 | app.mount() | 将 Vue 应用实例挂载到指定的 DOM 元素上。 |
| 4 | app.unmount() | 卸载 Vue 应用实例。 |
| 5 | app.onUnmount() | 注册一个回调函数，当应用卸载时执行。 |
| 6 | app.component() | 注册或获取全局组件，可在整个应用中使用。 |
| 7 | app.directive() | 注册或获取全局指令，用于创建自定义指令。 |
| 8 | app.use() | 安装插件，为应用添加额外的功能。 |
| 9 | app.mixin() | 注册全局混入，为所有组件提供共享的数据或方法。 |
| 10 | app.provide() | 为整个应用提供依赖，供组件之间共享。 |
| 11 | app.runWithContext() | 在 Vue 应用上下文中运行一个函数，允许访问上下文数据。 |
| 12 | app.version | 获取当前 Vue 版本。 |
| 13 | app.config | 获取和设置应用实例的全局配置。 |
| 14 | app.config.errorHandler | 设置全局错误处理器，用于捕获未处理的错误。 |
| 15 | app.config.warnHandler | 设置全局警告处理器，用于处理应用警告。 |
| 16 | app.config.performance | 启用性能监控，提供渲染性能数据。 |
| 17 | app.config.compilerOptions | 配置模板编译器的选项，控制模板行为。 |
| 18 | app.config.globalProperties | 设置全局属性，可在所有组件中访问。 |
| 19 | app.config.optionMergeStrategies | 定义组件选项的合并策略。 |
| 20 | app.config.idPrefix | 设置 Vue 实例 ID 的前缀，默认为 “vue-“。 |
| 21 | app.config.throwUnhandledErrorInProduction | 控制是否在生产环境中抛出未处理的错误。 |
| 22 | version | 获取当前 Vue 版本（全局）。 |
| 23 | nextTick() | 在下一个 DOM 更新周期后执行回调，用于处理异步 DOM 更新。 |
| 24 | defineComponent() | 定义组件，支持类型推断和简洁语法。 |
| 25 | defineAsyncComponent() | 定义异步组件，用于按需懒加载。 |
这些 API 涵盖了从应用实例化到全局配置的各种功能，开发者可以根据需求选择使用。
与 Vue 2 的对比
Vue 3 的全局 API 变化主要体现在以下几个方面：
- 应用实例化：Vue 3 使用
createApp创建应用实例，替换了 Vue 2 的new Vue()。每个createApp创建的应用实例是独立的，互不干扰。 - 全局 API 转移到应用实例：
Vue.config→app.configVue.component→app.componentVue.directive→app.directiveVue.mixin→app.mixinVue.use→app.useVue.prototype→app.config.globalProperties- 移除或修改的 API：
Vue.config.productionTip被移除；现在，生产提示仅在 “dev + full build” 中显示。Vue.config.ignoredElements被替换为app.config.compilerOptions.isCustomElement，现在是一个函数，提供更高的灵活性。Vue.extend被移除；改用createApp和defineComponent来定义组件。- Tree-shaking 支持：所有不改变全局行为的 API 现在是具名导出，支持 Tree-shaking，减少打包体积。
- 挂载方式：
app.mount(domTarget)替换了 Vue 2 的new Vue().$mount()。 - 依赖注入：
provide/inject现在可以在应用实例上使用，用于跨组件共享依赖。
这些变化使得 Vue 3 的全局 API 更加现代化，适合大规模应用的开发。
使用示例
以下是一个简单的 Vue 3 应用实例，展示了全局 API 的使用：
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App) // 创建应用实例
// 注册全局组件
app.component('MyComponent', {
template: '<div>这是一个全局组件</div>'
})
// 安装插件
app.use(myPlugin)
// 设置全局属性
app.config.globalProperties.$message = '这是一个全局属性'
// 挂载到 DOM
app.mount('#app')这个示例展示了如何创建应用实例、注册全局组件、安装插件和设置全局属性，体现了 Vue 3 全局 API 的灵活性和易用性。
总结与建议
Vue 3 的全局 API 通过 createApp 创建独立的应用实例，解决了 Vue 2 中全局配置的局限性。主要的全局 API 包括 createApp、app.mount、app.component、app.use 等，用于配置、注册和管理应用。与 Vue 2 相比，Vue 3 的全局 API 更加模块化和灵活，支持 Tree-shaking，提高了性能和可维护性。对于从 Vue 2 迁移到 Vue 3 的开发者，理解这些变化是非常重要的，以确保顺利过渡。