Vue 地图项目推荐用 provide/inject 共享地图实例，因其避免 props 逐层传递和全局变量污染，支持响应式、作用域清晰且自动释放；需在地图容器中 provide 响应式引用或原始对象，并在子组件 inject 使用，注意手动监听事件和销毁实例防泄漏。
在 Vue 应用中，尤其是地图类（如高德、百度、Leaflet 或 Mapbox）项目里，常需让多个深层嵌套组件访问同一个地图实例，避免重复初始化、资源浪费和状态不一致。Provide / Inject 是 Vue 官方推荐的跨多层组件共享“依赖”（如地图对象、事件总线、配置）的轻量方案，比 Vuex/Pinia 更聚焦、比 props/drills 更简洁。
为什么用 provide/inject 而不是 props 或全局变量？
Props 逐层传递繁琐且破坏组件封装；全局变量（如 window.map）易污染、难维护、无法响应式管理生命周期；EventBus 在复杂场景下难以追踪消息流向。provide/inject 天然支持响应式绑定（对 ref/reactive 有效），且作用域清晰——仅限当前组件树，地图实例随父组件卸载自动释放，符合 Vue 的响应式设计哲学。
在根组件或地图容器中 provide 地图实例
通常在初始化地图的组件（如 MapContainer.vue）中创建并 provide 实例。注意：必须确保地图对象已就绪（如 mounted 后 DOM 可用），且提供的是响应式包装或直接引用（非原始值）：
- 使用 ref 包裹地图对象（适用于 Options API 或组合式 API 中需响应式更新的场景）
- 若地图对象本身是可变对象（如 L.Map、AMap.Map），直接 provide 原始引用即可，inject 方可调用其方法
- 建议同时 provide 一个控制地图行为的简单 API 对象（如 { setCenter, addMarker, clearOverlays }），便于统一管理与测试
在任意后代组件中 inject 使用地图
子组件无需关心地图如何创建、在哪创建，只需声明 inject 即可获取。为增强可读性与类型安全（尤其 TS 项目），推荐命名注入：
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- Options API：在 inject: ['map', 'mapApi'] 中声明
- Composition API（setup）：const { map, mapApi } = inject('mapContext')（配合 provide({ map, mapApi }) 使用更语义化）
- 注入后可直接调用 map.setZoom(12) 或 mapApi.addMarker({ lng: 116.4, lat: 39.9 })
注意事项与边界处理
provide/inject 不是响应式数据流的替代品——它只传递引用，不监听地图内部状态变化。若需同步地图视图（如中心点、缩放级）到组件 data，仍需手动监听地图事件（如 'moveend'）并触发更新；另外，务必在父组件 onUnmounted 钩子中销毁地图实例（map.destroy?.() 或 map.remove?.()），防止内存泄漏；最后，避免在 inject 后直接解构赋值再修改属性（如 const { center } = mapApi；center.lng = 116），应通过 mapApi 提供的方法操作，保证单向数据流清晰。
不复杂但容易忽略细节，用好 provide/inject，地图实例就能稳稳地贯穿整个组件树。
