Vue 依赖注入如何使用 Symbol 作为 Provide 键名避免命名冲突

核心是用 Symbol 作唯一键名以杜绝命名冲突：Symbol 天然唯一不可重复，配合 InjectionKey 实现类型安全与编译期校验，避免字符串 key 导致的覆盖、无提示错误及类型推导失效。

用 Symbol 作为 provide/inject 的键名，核心是为了让注入标识天然唯一，彻底避开字符串 key 可能引发的命名冲突问题。这不是“可选技巧”，而是中大型项目里保障模块隔离和类型安全的实际刚需。

为什么字符串键名容易出问题

比如两个不同模块都写了 provide('user', userRef)，哪怕语义一致，运行时后注册的会覆盖先注册的——尤其在插件、UI 库或多人协作场景下，根本没法提前约定全局唯一的字符串 key。错误往往静默发生，调试成本高。

1. 字符串 key 是全局可枚举、可覆盖的普通属性
2. 没有编译期校验，IDE 无法识别注入来源
3. TypeScript 无法推导注入值类型，只能靠手动断言

用 Symbol 定义唯一注入键

把 Symbol 提前定义为常量，统一管理在单独文件（如 symbols.ts），所有提供方和注入方都导入同一个 Symbol 实例：

1. // symbols.ts export const UserSymbol = Symbol('UserContext');
2. // 祖先组件中 provide(UserSymbol, userRef);
3. // 后代组件中 inject(UserSymbol);

注意：每次调用 Symbol('user') 都生成新实例，所以必须复用同一导出变量，不能各自声明。

配合 TypeScript 做类型约束

利用 Vue 提供的 InjectionKey 类型，把 Symbol 显式声明为带类型的注入键：

1. import type { InjectionKey } from 'vue';
2. export const UserSymbol = Symbol('UserContext') as InjectionKey>;
3. 这样 inject 时就能自动获得 Ref 类型推导，不再需要类型断言
4. 如果注入值类型不匹配，TypeScript 会在编译时报错

实际使用中的关键细节

Symbol 键名本身不改变响应式行为，但能显著提升工程健壮性：

1. provide 的值如果是 ref，inject 拿到的是原 ref，保持响应式连接
2. inject 可传默认值，比如 inject(UserSymbol, ref({ name: '' }))
3. 应用级 provide（app.provide(UserSymbol, ...)）同样适用 Symbol 键名
4. 不要在模板中直接用 Symbol，它不可序列化，只用于逻辑层键值匹配