Vue 3 中的全局 API：从 Vue 到 App 的转变

在 Vue 3 中，许多原本属于 Vue 全局对象的 API 现在被转移到了应用实例（App）上。这种变化使得 Vue 3 的全局 API 更加模块化和灵活。本文将通过具体的场景和代码示例，深入探讨这些变化，帮助你更好地理解和使用 Vue 3 中的全局 API。

一、App 与全局 API

在 Vue 2.x 中，我们经常使用 Vue 全局对象来注册全局组件、指令、插件等。例如：

Vue.component('global-component', {
  template: '<div>这是一个全局组件</div>'
});

Vue.directive('global-directive', {
  bind(el, binding) {
    el.style.color = binding.value;
  }
});

Vue.use(MyPlugin);

在 Vue 3 中，这些全局 API 现在被移到了 App 实例上。App 是 Vue 3 中的应用实例，它通过 createApp 函数创建。例如：

import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './plugins/MyPlugin';

const app = createApp(App);

app.component('global-component', {
  template: '<div>这是一个全局组件</div>'
});

app.directive('global-directive', {
  beforeMount(el, binding) {
    el.style.color = binding.value;
  }
});

app.use(MyPlugin);

app.mount('#app');

二、全局组件

（一）注册全局组件

在 Vue 3 中，你可以通过 App 实例的 component 方法注册全局组件。这些组件可以在任何地方使用，而不需要导入。

import { createApp } from 'vue';
import App from './App.vue';
import GlobalComponent from './components/GlobalComponent.vue';

const app = createApp(App);

app.component('GlobalComponent', GlobalComponent);

app.mount('#app');

（二）使用全局组件

一旦全局组件被注册，你可以在任何组件中直接使用它，而不需要导入。

<template>
  <div>
    <h1>这是父组件</h1>
    <GlobalComponent />
  </div>
</template>

三、全局指令

（一）注册全局指令

在 Vue 3 中，你可以通过 App 实例的 directive 方法注册全局指令。这些指令可以在任何地方使用，而不需要导入。

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

const app = createApp(App);

app.directive('global-directive', {
  beforeMount(el, binding) {
    el.style.color = binding.value;
  }
});

app.mount('#app');

（二）使用全局指令

一旦全局指令被注册，你可以在任何组件中直接使用它，而不需要导入。

<template>
  <div>
    <h1 v-global-directive="'red'">这是父组件</h1>
  </div>
</template>

四、全局插件

（一）注册全局插件

在 Vue 3 中，你可以通过 App 实例的 use 方法注册全局插件。这些插件可以在任何地方使用，而不需要导入。

import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './plugins/MyPlugin';

const app = createApp(App);

app.use(MyPlugin);

app.mount('#app');

（二）使用全局插件

一旦全局插件被注册，你可以在任何组件中直接使用它，而不需要导入。

<template>
  <div>
    <h1>这是父组件</h1>
    <MyPluginComponent />
  </div>
</template>

五、全局配置

（一）设置全局配置

在 Vue 3 中，你可以通过 App 实例的 config 属性设置全局配置。例如，设置全局属性或全局方法。

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

const app = createApp(App);

app.config.globalProperties.x = 99;

app.mount('#app');

（二）使用全局配置

一旦全局配置被设置，你可以在任何组件中直接使用它，而不需要导入。

<template>
  <div>
    <h1>这是父组件</h1>
    <p>{{ x }}</p>
  </div>
</template>

<script>
export default {
  setup() {
    return {
      x: this.x
    };
  }
};
</script>

六、全局生命周期钩子

（一）注册全局生命周期钩子

在 Vue 3 中，你可以通过 App 实例的 onErrorCaptured 和 onUnmounted 方法注册全局生命周期钩子。这些钩子可以在任何地方使用，而不需要导入。

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

const app = createApp(App);

app.onUnmounted(() => {
  console.log('应用已卸载');
});

app.mount('#app');

（二）使用全局生命周期钩子

一旦全局生命周期钩子被注册，你可以在任何组件中直接使用它，而不需要导入。

<template>
  <div>
    <h1>这是父组件</h1>
  </div>
</template>

七、总结

Vue 3 中的全局 API 从 Vue 全局对象转移到了 App 实例上。这种变化使得 Vue 3 的全局 API 更加模块化和灵活。通过 App 实例，你可以注册全局组件、指令、插件、配置和生命周期钩子。这些全局 API 可以在任何地方使用，而不需要导入。这种变化不仅提高了代码的可维护性，还使得 Vue 3 的全局 API 更加灵活和强大。