Vue3迁移指南（一）：全局API应用实例

**Vue3 迁移指南 (一) : 全局 API 应用实例**

**前言**

Vue2.x 和 Vue3.x 之间存在一些重大变化，尤其是在全局 API 方面。为了帮助您顺利迁移到 Vue3.x，我们准备了一系列的迁移指南。在本篇中，我们将重点介绍 Vue3.x 中全局 API 的变化，并提供实例代码示范。

**1. 全局 API 的变化**

在 Vue2.x 中，许多全局 API 都是通过 `Vue` 对象暴露出来的。例如，`Vue.prototype.$ 等。但是在 Vue3.x 中，这些全局 API 已经被移到了 `app.config.globalProperties` 上。

**实例代码**

javascript// Vue2.xVue.prototype.$http = axios.create({
 baseURL: ' />})

// Vue3.xconst app = createApp(App)
app.config.globalProperties.$http = axios.create({
 baseURL: ' />})

**2. 全局组件的变化**

在 Vue2.x 中，通过 `Vue.component` 注册全局组件。在 Vue3.x 中，这些全局组件需要通过 `app.component` 来注册。

**实例代码**

javascript// Vue2.xVue.component('my-component', {
 template: '<div>这是一个全局组件</div>'
})

// Vue3.xconst app = createApp(App)
app.component('my-component', {
 template: '<div>这是一个全局组件</div>'
})

**3. 全局过滤器的变化**

在 Vue2.x 中，通过 `Vue.filter` 注册全局过滤器。在 Vue3.x 中，这些全局过滤器需要通过 `app.use` 来注册。

**实例代码**

javascript// Vue2.xVue.filter('formatDate', (date) => {
 return formatDate(date)
})

// Vue3.xconst app = createApp(App)
app.use((date) => {
 return formatDate(date)
})

**4. 全局指令的变化**

在 Vue2.x 中，通过 `Vue.directive` 注册全局指令。在 Vue3.x 中，这些全局指令需要通过 `app.directive` 来注册。

**实例代码**

javascript// Vue2.xVue.directive('focus', {
 inserted: (el) => {
 el.focus()
 }
})

// Vue3.xconst app = createApp(App)
app.directive('focus', {
 inserted: (el) => {
 el.focus()
 }
})

**总结**

在本篇中，我们介绍了 Vue3.x 中全局 API 的变化，并提供了实例代码示范。通过这些改变，Vue3.x 提供了更灵活和高效的全局 API 体验。我们希望这篇指南能够帮助您顺利迁移到 Vue3.x。