Vue3 app.config.globalProperties 属性（长文讲解）

Vue3 app.config.globalProperties 属性

核心概念

app.config.globalProperties 是 Vue 3 提供的一个配置对象，用于向所有组件实例中注入全局属性和方法。这意味着，一旦在 globalProperties 中添加了某个属性或方法，所有组件都可以直接访问它，而无需通过 props 或依赖注入的方式引入。

简单来说，它就像一个“共享的工具箱”，你可以把常用的方法、变量、插件等放进去，让所有组件都能直接使用，无需重复定义。

Vue 提供这个功能的目的，是为开发者提供一个集中管理全局行为和数据的入口，尤其是在 Vue 3 的 Composition API 中，组件不再默认继承 this，因此通过 globalProperties 可以恢复部分 Vue 2 的便捷性。

基础语法

在 Vue 3 中，globalProperties 是通过 createApp 返回的 app 实例进行配置的，通常在 main.js 或 main.ts 文件中设置。

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

const app = createApp(App)
// 向所有组件注入一个全局属性
app.config.globalProperties.$myGlobal = '这是全局属性'

// 向所有组件注入一个全局方法
app.config.globalProperties.$log = function (msg) {
    console.log('全局日志:', msg)
}

app.mount('#app')

在组件内部，可以通过 this 访问这些全局属性和方法（注意：仅在 Options API 中可用，Composition API 中 this 不可用）：

// MyComponent.vue
export default {
    mounted() {
        // 访问全局属性
        console.log(this.$myGlobal)  // 输出: 这是全局属性
        // 调用全局方法
        this.$log('组件已挂载')       // 输出: 全局日志: 组件已挂载
    }
}

进阶特性

下面是一个更完整的示例，展示如何将一个方法注入为全局行为，并在多个组件中使用：

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

const app = createApp(App)

// 注入一个格式化货币的方法
app.config.globalProperties.$formatMoney = function (value) {
    return '¥' + value.toFixed(2)
}

app.mount('#app')

<!-- MyComponent.vue -->
<template>
    <div>商品价格: {{ $formatMoney(99.5) }}</div>
</template>

<script>
export default {
    name: 'MyComponent'
}
</script>

实战应用

1. 全局访问 API 地址

// main.js
const app = createApp(App)
app.config.globalProperties.$apiUrl = 'https://api.yourproject.com'
app.mount('#app')

// 在组件中使用
this.$axios.get(this.$apiUrl + '/products')

2. 全局日志方法

// main.js
app.config.globalProperties.$log = function (msg) {
    console.log('[全局日志]', msg)
}

// MyComponent.vue
<script>
export default {
    mounted() {
        this.$log('组件初始化完成')
    }
}
</script>

3. 在自定义指令中使用 globalProperties

// main.js
app.directive('format-money', {
    mounted(el, binding) {
        const formatted = app.config.globalProperties.$formatMoney(binding.value)
        el.textContent = formatted
    }
})

<!-- MyComponent.vue -->
<template>
    <div v-format-money="99.5"></div>
</template>

注意事项

• 只适用于 Options API：在使用 Composition API（setup 函数）时，this 无法访问 globalProperties 中的内容。可使用 getCurrentInstance().proxy 来获取：

  import { getCurrentInstance } from 'vue'
  
  const instance = getCurrentInstance()
  const formatted = instance.proxy.$formatMoney(99.5)
  

• 避免滥用：虽然 globalProperties 很方便，但滥用会导致代码难以维护和测试。建议仅在真正需要“全局共享”的场景下使用。

• 命名冲突：Vue 本身已经定义了一些以 $ 开头的属性和方法（如 $emit、$on 等），在自定义注入时也建议使用 $ 前缀以保持一致性。

• 无法在组件 setup 中使用 this：在 setup 中无法访问 this，因此无法直接调用 globalProperties 中的方法。需要使用 getCurrentInstance() 获取组件实例。

总结

Vue3 app.config.globalProperties 属性 是一个实用的配置点，用于在组件之间共享全局方法和属性，合理使用可以提高代码复用性和开发效率。