vue 的 provide/inject 是依赖注入而非通信机制，祖先单向提供响应式数据（需 ref/reactive 包裹），后代按需注入，跳过中间层透传；推荐用 symbol 作 key 避免冲突，适用于主题、locale 等上下文场景，不替代 pinia。
Vue 的 provide 和 inject 不是“通信”，而是依赖注入——祖先单向提供数据或方法，后代按需获取，中间组件完全不感知。它解决的不是“怎么传消息”，而是“怎么让深层组件自然获得上下文”。
为什么不用 props 透传？
当组件嵌套超过三层（比如 App → Layout → Section → Form → Field），只为让最底层组件用一个主题色或表单规则，却要每层都声明 props、再向下传递，代码冗余、易出错、难维护。provide/inject 直接跳过中间层，像插电一样把上下文“接进来”。
响应式数据必须用 ref 或 reactive 包裹
provide 出去的值默认不响应。哪怕父组件里改了变量，子组件 inject 到的还是旧值。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- ✅ 正确：提供
ref('dark')或reactive({ theme: 'dark' }) - ❌ 错误：直接提供字符串
'dark'或普通对象{ theme: 'dark' } - ⚠️ 注意：inject 返回的 ref 可直接解构使用，如
const { theme } = inject(themeKey)；但若返回的是普通对象，默认值不能写ref({})，否则会丢失响应性
推荐用 Symbol 作 key，避免命名冲突
字符串 key（如 'theme'）在大型项目中容易被不同模块重复使用，导致注入错乱。Symbol 是唯一标识：
- 定义：
const themeKey = Symbol('theme')（通常放在单独文件统一管理） - provide：
provide(themeKey, { theme: ref('light'), toggle: () => {} }) - inject：
const ctx = inject(themeKey)，TypeScript 下还能精准类型推导：inject<themecontext>(themeKey)</themecontext>
适用场景明确，别当状态管理用
它适合松耦合、单向、上下文类需求：
- 主题切换（暗色/亮色）、语言 locale、API 基础路径
- 表单组件库：Form 提供校验上下文，Field 自动接入
- 权限控制：Layout 提供用户角色，任意子菜单读取并渲染
- ⚠️ 不适合：需要双向更新、复杂业务逻辑、多组件协同修改的状态——这类该用 Pinia
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
