Vue 3 中全局属性必须在 createApp() 后、mount() 前通过 app.config.globalProperties 注册，Options API 中直接用 this.$xxx，Composition API 需通过 getCurrentInstance().proxy 访问，推荐挂载简单工具函数并统一管理。
Vue 3 中用 app.config.globalProperties 挂载全局属性，核心就一点：在应用实例创建后、挂载前完成注册，之后所有组件（Options API 或 Composition API）都能按需访问。
在哪注册？必须在 createApp() 后、mount() 前
注册位置错误是常见问题。不能写成两次 createApp()，也不能在 mount() 之后才加——那样全局属性根本不会生效。
- 正确写法（main.ts 或 main.js）：
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// ✅ 在这里挂载
app.config.globalProperties.$apiBase = 'https://api.example.com'
app.config.globalProperties.$log = (msg) => console.info('[APP]', msg)
app.mount('#app')
- 不推荐把多个全局属性散落在各处，建议统一管理，比如抽成插件或 utils 文件再导入。
Options API 组件里怎么用？直接 this.$xxx
和 Vue 2 的 this.$xxx 用法一致，无需额外引入或解构。
立即学习“前端免费学习笔记（深入）”；
- 模板中可直接绑定：
<p>{{ $apiBase }}</p> - 脚本中调用：
this.$log('初始化完成') - 注意：如果组件自身也有同名属性（如
data() { return { $apiBase: 'xxx' } }），会覆盖全局的，优先取组件内部定义的。
Composition API（<script setup>）怎么用？靠 getCurrentInstance()
Setup 里没有 this，必须通过实例获取 proxy 才能访问全局属性。
- 基础写法（开发环境可用）：
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
console.log(proxy.$apiBase)
- 生产环境更稳妥写法（避免 proxy 为 null）：
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
if (instance) {
const { appContext: { config: { globalProperties } } } = instance
console.log(globalProperties.$apiBase)
}
- 也可以封装一个 composable，比如
useGlobalProperties()，复用逻辑。
挂什么合适？哪些要避开？
适合挂载简单、稳定、无状态的工具函数或常量；不适合挂复杂状态或响应式对象。
- 推荐挂：
$formatDate、$http（封装好的请求函数）、$message（UI 提示方法） - 不推荐挂：
$user（用户信息建议用 Pinia 管理）、$router（已通过useRouter提供）、响应式数据（会丢失响应性） - 命名习惯：统一加
$前缀（如$utils），和 Vue 内置属性（$emit、$refs）保持风格一致，也便于区分。
