vue 3 中全局属性用于所有组件直接访问的常量或工具函数，需在 createapp 后、mount 前配置并声明 typescript 类型；provide/inject 用于跨层级响应式传递局部上下文数据，推荐用 symbol 作 key，二者用途不同但可组合使用。

Vue 3 中全局属性和依赖注入是两种不同用途、不同作用域的机制，不能混用，但可以互补。关键不是“怎么一起配置”，而是“什么场景该用哪个、怎么配才不出错”。

全局属性：挂到 app.config.globalProperties 上，组件内用 this 访问

适合所有组件都需直接调用的常量、工具函数或调试开关（如 $apiUrl、$notify、$isDebug）。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 必须在 createApp() 之后、app.mount() 之前设置
• 推荐统一加 $ 前缀（如 $http），避免与组件自身属性冲突
• TypeScript 类型必须同步声明：在 vue-shim.d.ts 或 env.d.ts 中补充接口
• 错误示例：定义了 globalProperties.isDebug = true，却在组件里写 this.$isDebug → 类型不匹配且值为 undefined

provide / inject：祖先提供、后代注入，跨层级传递响应式数据

适合主题、用户状态、国际化配置等需要响应式更新、且只在部分组件树中使用的上下文数据。

• 不依赖 this，<script setup></script> 中直接用 provide() 和 inject()
• 强烈建议用 Symbol 作 key（如 export const THEME_KEY = Symbol('theme')），防止命名污染
• 若提供的是响应式数据（ref 或 reactive），注入后自动保持响应性；普通对象需手动包装
• 不适用于全局工具函数——它本质是“向下传递”，不是“随处可用”

别把两者当替代品，但可组合使用

例如：用全局属性挂载一个 $bus 事件总线实例，再用 provide/inject 把当前页面的业务状态（如表单校验结果）传给子组件。

• 全局属性负责“通用能力”，provide/inject 负责“局部上下文”
• 不要在 provide 里重复挂载 router 或 pinia ——它们已通过 .use() 自动注入，直接 inject 即可
• 大型项目中，可封装一个 setupProviders(app) 函数，在 main.ts 统一注册所有 provide 逻辑，保持入口干净

常见踩坑点

• 在 setup() 或 <script setup></script> 中试图用 this.$xxx → 错误！Composition API 下 this 不可用，应改用 getCurrentInstance()?.appContext.config.globalProperties（不推荐），或直接走 provide/inject
• 用字符串做 inject key，多个模块都叫 'config' → 推荐全项目统一管理 injectionKeys.ts
• provide 的值是原始类型（如 provide('count', 1)），后代无法响应变化 → 改用 provide('count', ref(1))

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！