Vue 3 中如何使用全局 API？

在 Vue 3 中，全局 API 的使用方式相比 Vue 2 有所变化，主要是由于 Vue 3 引入了 Composition API 和对 Tree-Shaking 的优化。以下是一些在 Vue 3 中使用全局 API 的常见方法：

1. 创建 Vue 应用实例

在 Vue 3 中，你需要使用 createApp 方法来创建一个新的 Vue 应用实例。这是所有 Vue 3 应用的起点。

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

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

2. 全局配置

你可以使用 app.config 对象来设置全局配置。例如，你可以更改组件的命名策略或性能提示。

app.config.productionTip = false // 关闭生产提示

3. 全局注册组件

在 Vue 3 中，你可以使用 app.component 方法来全局注册组件。

import MyComponent from './MyComponent.vue'

app.component('my-component', MyComponent)

4. 全局注册指令

你可以使用 app.directive 方法来全局注册自定义指令。

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

5. 全局注册混入 (Mixin)

虽然 Vue 3 仍然支持混入，但官方不推荐在生产环境中使用它们，因为它们可能导致难以追踪的问题。不过，如果你确实需要使用混入，可以使用 app.mixin 方法来全局注册。

const myMixin = {
  // 混入逻辑
}

app.mixin(myMixin)

6. 全局注册插件

你可以使用 app.use 方法来安装 Vue 插件。插件通常会添加全局级别的功能。

import MyPlugin from './MyPlugin'

app.use(MyPlugin)

7. 全局提供和注入 (Provide / Inject)

provide 和 inject 允许你在祖先组件中向其所有子孙组件提供一个依赖，不论组件层次有多深，该依赖都可以注入进来。你可以在 setup 函数中使用它们。

// 祖先组件
setup() {
  const theme = ref('dark')

  provide('theme', theme)

  // ...
}

// 后代组件
setup() {
  const theme = inject('theme', 'default') // 如果没有提供 'theme'，则返回 'default'

  // ...
}

8. 使用 Composition API

虽然 Composition API 本身不是全局 API，但它在 Vue 3 中是构建可重用逻辑的关键部分。你可以创建可复用的组合函数（Composables），并在多个组件中使用它们。

9. 访问全局属性和方法

如果你需要在多个组件中访问全局属性或方法，你可以考虑将它们放在一个单独的模块中，并在需要的地方导入它们。由于 Vue 3 的模块化设计，通常不建议在全局范围内添加太多属性和方法。

10. Vuex 或其他状态管理库

对于复杂的应用程序，你可能还需要使用 Vuex 或其他状态管理库来管理全局状态。这些库提供了在 Vue 组件之间共享状态的模式和工具。

原文地址：https://blog.csdn.net/weixin_44337480/article/details/139006101

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！